如何使用 SASS 模拟 Material UI 的“theme.mixins.toolbar”答案

【问题标题】：How to simulate Material UI's "theme.mixins.toolbar" using SASS如何使用 SASS 模拟 Material UI 的“theme.mixins.toolbar”
【发布时间】：2020-02-02 23:00:04
【问题描述】：

这里的问题很简单。我一直在 Mui/React/Scss 兔子洞里试图找到关于样式 Mui 组件的简单答案使用 SASS，不使用 JSS、主题、withStyles 等。这个是客户的要求。

我目前正在尝试为“theme.mixins.toolbar”样式寻找 SCSS 解决方法，以防止不同的布局组件重叠等。我正在使用网格，但我仍然遇到问题。

抱歉，如果已经提出此问题，并提前感谢您的帮助。

【问题讨论】：

标签： reactjs sass material-ui scss-mixins

【解决方案1】：

弄清楚这一点的起点是查看在 Material-UI 中使用 mixin 的位置。我相信这只是在Toolbar。它也用于其他组件的几个演示中，例如Drawer，但我认为Toolbar 是库本身中唯一使用它的地方。

您还可以查看mixin itself 的源代码，如下所示：

    toolbar: {
      minHeight: 56,
      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
        minHeight: 48,
      },
      [breakpoints.up('sm')]: {
        minHeight: 64,
      },
    },

Responsive drawer demo 是一个在几个地方使用 mixin 的演示。演示的源代码可以在这里看到：https://codesandbox.io/s/v66pl。

您可以查看该演示中<head> 元素中的样式，并查找为MuiToolbar 生成的内容。具体来说，它的regular 类是使用mixin 的类。

这是生成的 CSS：

.MuiToolbar-regular {
  min-height: 56px;
}
@media (min-width:0px) and (orientation: landscape) {
  .MuiToolbar-regular {
    min-height: 48px;
  }
}
@media (min-width:600px) {
  .MuiToolbar-regular {
    min-height: 64px;
  }
}

要在不使用主题的情况下利用此 CSS，只需将此 CSS 复制到具有不同类名的 SCSS 文件中：

.plain-css-mui-toolbar-mixin {
  min-height: 56px;
}
@media (min-width: 0px) and (orientation: landscape) {
  .plain-css-mui-toolbar-mixin {
    min-height: 48px;
  }
}
@media (min-width: 600px) {
  .plain-css-mui-toolbar-mixin {
    min-height: 64px;
  }
}

然后在适当的地方使用它。您可以在我的响应式抽屉演示的更改版本中看到这一点：https://codesandbox.io/s/toolbar-mixin-3l58u

【讨论】：

哇 - 感谢您花时间解释这一点！我非常感激。