Question

我们希望在我们的应用程序中使用材料ui下一个组件，我们正在使用带有SASS的样式化组件。为此，我们使用webpack和raw-loader导入生成的CSS并应用如下样式：

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

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

我们正在尝试这种方法，因为样式化组件似乎是样式反应组件的好方法，但我们想要使用常规sass文件，因此我们的设计人员可以像普通的那样创建样式，而不必编写css-in-js。

现在我面对的是材料ui组件的问题是很多组件都有子组件（例如Drawer组件有一个Paper组件作为它的子组件）而且我很难找到一种用我们的方法设计样式的好方法 - 我知道推荐的方法是使用类prop：

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

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

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

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

Answer 1

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

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