在 Material UI React 中直接使用 SCSS答案

【问题标题】：Using SCSS In Material UI React directly在 Material UI React 中直接使用 SCSS
【发布时间】：2020-10-09 06:32:22
【问题描述】：

我在材质 ui 中直接使用 scss 有一些问题，因为并非所有样式都适用。尝试使用makeStyle，但因为我使用类组件，它会发出有关无效挂钩调用的警告。

风格：

.table-header {
  background-color: #005CAA; //only this style works
  color: white;
  font-weight: bold;
  text-align: center;
}

我从 Material UI 调用 TableCell 组件

 <TableCell className="table-header">Invoice Number</TableCell>

scss文件是在父组件App.tsx中导入，还是需要直接在Table组件中导入？谢谢

【问题讨论】：

你收到了什么警告？
在类组件中使用 makeStyle 函数？它给invalid hook call。
对于类组件，你应该使用withStyles和makeStyles作为函数组件。在这里阅读更多：material-ui.com/styles/advanced

【解决方案1】：

如果你想在 MUI 组件中使用 CSS/SCSS 类，你应该直接在 Table 组件中导入文件。但是，将 SCSS 与 MUI 组件一起使用并不好，您应该使用 makeStyles 或 withStyles 来设置 MUI 组件的样式。

【讨论】：

【解决方案2】：

我不确定这是否是最佳实践，事实上这就是我最终发表这篇文章的原因。这里解释了如何将 scss 与 material-ui 一起使用：https://www.markmakesstuff.com/posts/mui-css-modules

“只需安装 node-sass”
“如果您正在使用使用 create-react-app 之类的脚本初始化的应用程序，那么您很幸运。无需进行 webpack 编辑。只需给您的模块起一个以“.module.scss”结尾的名称” 否则 2') 你需要“对你的 webpack 配置做一些小的修改”
“然后，您可以使用名称导入模块，然后在编写花哨的 JSX 时使用它来引用您的类”

【讨论】：