如何使用样式化组件和 SASS 设置材质 ui 下一个组件的样式

Posted 2023-02-22

【中文标题】如何使用样式化组件和 SASS 设置材质 ui 下一个组件的样式

【英文标题】：How to style material ui next components with styled components and SASS

【发布时间】：2018-04-06 10:00:10

【问题描述】：

我们希望在我们的应用程序中使用材质 ui 下一个组件，其中我们使用带有 SASS 的样式组件。为了实现这一点，我们使用 webpack 和 raw-loader 来导入生成的 CSS 并应用如下样式：

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

const StyledDrawer = styled(Drawer)`
    $sidebarStyles
    `

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

现在我在使用 Material ui 组件时遇到的问题是许多组件都有子组件（例如，Drawer 组件有一个 Paper 组件作为其子组件），我正在努力寻找一种使用我们的方法设置样式的好方法 -我知道推荐的方法是使用 classes 属性：

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

classes=
    paper: classes.drawerPaper,

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

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

【参考方案1】：

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

classes=
  paper: `SASS_CLASS_NAME_HERE`,

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

【讨论】：

哦，我不知道我可以给它任意的类名。我认为需要通过 css 模块加载 CSS 以将两者“链接”在一起（iirc 在我找到的所有示例中都是这样使用的）