如何使用带样式的组件和 SASS 为 material ui 下一个组件设置样式

Question

我们想在我们的应用程序中使用 material ui 下一个组件，其中我们使用带有 SASS 的样式组件。为了实现这一点，我们使用 webpack 和一个原始加载器来导入生成的 CSS 并像这样应用样式：

const sidebarStyles = require('./Sidebar.sass');

const StyledDrawer = styled(Drawer)`
    ${sidebarStyles}
    `

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

现在我面对 material ui 组件的问题是许多组件都有子组件（例如 Drawer 组件有一个 Paper 组件作为它的子组件），我正在努力寻找用我们的方法来设置样式的好方法——我知道推荐的方法是使用类 prop:

const styles = theme => ({
    drawerPaper: {
        width: 250
    }
});

classes={{
    paper: classes.drawerPaper,
}}

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

这是否可能，最好的方法是什么？

Answer 1

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

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

How to style material ui next components with styled components and SASS