我们希望在应用程序中使用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文件导入样式为文本的要求。

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