我们想在我们的应用程序中使用材料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文件导入的要求 .
这甚至是可能的吗?最好的方法是什么?
1 回答
您应该能够将类的名称从sass文件传递给classes对象 .
更多信息:https://material-ui-next.com/customization/overrides/#overriding-with-classes