如何将scss样式应用于我的CRA应用程序和材质UI？

我用CRA制作了react应用程序。 我将使用材料界面和样式与SCS

我使用节点sass创建了main.css文件

我尝试将main.css文件应用于材料ui排版

在main.css中

.logottitle{
字号：20rem；
}

但如果加载了我的网页排版元素，则不会应用logottitle样式

我的问题是什么？

如果相同，CSS中最后声明的样式将获胜。默认情况下，材质UI将其样式放置在

元素的末尾。这意味着材质UI中的默认样式将胜过

中声明的具有相同特性的其他样式（例如您的

字体大小

案例）。您可以通过使用

injectFirst

属性的

StylesProvider

元素包装应用程序的顶层来更改此行为。这将导致材质UI将其样式放置在

元素的开头

以下是一个工作示例：

App.js

import React from "react";
import Typography from "@material-ui/core/Typography";
import { StylesProvider } from "@material-ui/core/styles";
import "./styles.css";

export default function App() {
  return (
    <StylesProvider injectFirst>
      <Typography variant="h1" color="primary" className="logoTitle">
        Hello
      </Typography>
    </StylesProvider>
  );
}

.logoTitle {
  font-size: 20rem;
}

相关答复:

---

文档：

请将您的代码示例作为文本（就像您使用css时那样）而不是图像放在问题中。感谢您的努力。。。！好心