如何使用 SASS 模拟 Material UI 的 "theme.mixins.toolbar"

Question

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

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

如果有人问过这个问题，我们深表歉意，在此先感谢您的帮助。

Answer 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 is one demo that uses the mixin in a couple places. The source code for the demo can be seen here: https://codesandbox.io/s/v66pl.

您可以查看该演示中 <head> 元素中的样式，并找到为 MuiToolbar 生成的样式。具体来说，它的 regular class 是使用 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 文件中，并使用不同的 class 名称：

.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

如何使用 SASS 模拟 Material UI 的 "theme.mixins.toolbar"

How to simulate Material UI's "theme.mixins.toolbar" using SASS

sass

reactjs

material-ui

scss-mixins