如何用样式化组件和SASS对物料界面下一个组件进行样式化

Question

我们希望在应用程序中使用MaterialUI、next组件，在应用程序中，我们将样式化组件与SASS一起使用。为此，我们使用webpack和一个原始加载程序导入生成的CSS并应用如下样式：

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

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

我们尝试这种方法是因为样式化组件似乎是一种对react组件进行样式化的好方法，但是我们希望使用常规的sass文件，这样我们的设计师就可以像普通的一样创建样式，而不必在JS中编写CSS。

现在我面对的材料ui组件的问题是，许多组件都有子组件（例如，Drawer组件有一个Paper组件作为它的子组件），我正努力寻找一个好的方法来用我们的方法来设计这些组件--我知道推荐的方法是使用类道具：

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

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

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

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

Answer 1

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

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

更多信息:https://material-ui-next.com/customization/overrides/#用类覆盖