如何使用样式化组件和 SASS 设置材料 UI 下一个组件的样式

Question

我们希望在应用程序中使用材料 UI 下一个组件，其中我们将样式化组件与 SASS 一起使用。为了实现这一点，我们使用 webpack 和一个原始加载器来导入生成的 CSS 并应用如下样式：

const sidebarStyles = require('./Sidebar.sass');
const StyledDrawer = styled(Drawer)`
    ${sidebarStyles}
    `

我们正在尝试这种方法，因为样式化组件似乎是样式化 react 组件的好方法，但我们希望使用常规的 sass 文件，以便我们的设计人员可以像普通一样创建样式，而无需编写 css-in-js。

现在我在材料 ui 组件方面面临的问题是许多组件都有子组件（例如，抽屉组件有一个 Paper 组件作为其子组件），我正在努力找到一种用我们的方法设置这些组件样式的好方法 - 我知道推荐的方法是使用类 prop：

const styles = theme => ({
    drawerPaper: {
        width: 250
    }
});
classes={{
    paper: classes.drawerPaper,
}}

但这不符合我们从外部 .sass 文件将样式作为文本导入的要求。

这甚至可能吗，最好的方法是什么？

Answer 1

您应该能够将类的名称从 sass 文件传递给 classes 对象。

classes={{
  paper: `SASS_CLASS_NAME_HERE`,
}}

更多信息： https://material-ui-next.com/customization/overrides/#overriding-with-classes