如何使用样式组件和 SASS 为 Material ui next 组件设置样式

IT技术 reactjs sass material-ui styled-components
2021-05-25 23:21:26

我们想在我们的应用程序中使用材质 ui next 组件,我们将样式组件与 SASS 一起使用。为了实现这一点,我们使用 webpack 和一个 raw-loader 来导入生成的 CSS 并应用如下样式:

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

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

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

现在我面临的材质 ui 组件的问题是许多组件都有子组件(例如,抽屉组件有一个 Paper 组件作为它的子组件),我正在努力寻找一种用我们的方法来设置样式的好方法 - 我知道推荐的方法是使用 classes props:

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

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

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

这甚至可能吗?最好的方法是什么?

1个回答

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

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

更多信息:https : //material-ui-next.com/customization/overrides/#overriding-with-classes