Reactjs 如何模拟物料界面'；s"；theme.mixins.toolbar“；使用SASS

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

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

---

如果已经问过这个问题，我表示歉意，并提前感谢您的帮助。

解决这个问题的出发点是查看在Material UI中使用mixin的位置。我相信这只是一个问题。它还用于其他组件的一些演示，如

抽屉

，但我认为

工具栏

是库中唯一使用它的地方

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

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

这是一个在几个地方使用mixin的演示。演示的源代码可以在这里看到：

您可以查看该演示中

元素中的样式，并找到为

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;
  }
}

---

然后在适当的地方使用。您可以在我修改版的响应抽屉演示中看到这一点：

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