Question

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

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

很抱歉，如果已经提出此要求，请先谢谢您的帮助。

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是一个在几个地方使用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

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

1 个答案: