如何使用材料 UI 应用 scss styles 我的 CRA 应用程序？

Question

I made react app by CRA.我通过 CRA 制作了 react 应用程序。 and I gonna use material ui and styling with SCSS.我将使用材质 ui 和 SCSS 样式。

I made main.css file by using node-sass.我使用 node-sass 制作了 main.css 文件。

and I tried to apply my main.css file to Material-ui Typography.我尝试将我的 main.css 文件应用于 Material-ui 排版。

in main.css在 main.css

.logoTitle {
  font-size: 20rem;
}

But if loaded my web Typography element doesn't apply logoTitle styles..但如果加载我的 web 版式元素不适用 logoTitle styles ..

what's my problem..?我有什么问题..？

Answer 1

When CSS specificity is the same, the styles that are declared last in the CSS will win.当CSS 特异性相同时，在 CSS 中最后声明的 styles 将获胜。 By default, Material-UI places its styles at the end of the <head> element.默认情况下，Material-UI 将其 styles 放在<head>元素的末尾。 This means that the default styles in Material-UI will win over other styles declared in the <head> with the same specificity (such as your font-size case).这意味着 Material-UI 中的默认 styles 将战胜在<head>中声明的具有相同特性的其他 styles （例如您的font-size情况）。 You can change this behavior by wrapping the top-level of your app with the StylesProvider element with the injectFirst property.您可以通过使用带有injectFirst属性的StylesProvider元素包装应用程序的顶层来更改此行为。 This will cause Material-UI to place its styles at the beginning of the <head> element.这将导致 Material-UI 将其 styles 放置在<head>元素的开头。

Here is a working example:这是一个工作示例：

App.js应用程序.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>
  );
}

styles.css styles.css

.logoTitle {
  font-size: 20rem;
}

Related answer: How to overwrite styles with classes and css modules?相关答案：如何用类和 css 模块覆盖 styles？

Documentation: https://material-ui.com/styles/api/#stylesprovider文档： https://material-ui.com/styles/api/#stylesprovider

如何使用材料 UI 应用 scss styles 我的 CRA 应用程序？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-05-26 15:53:38

如何使用材料 UI 应用 scss styles 我的 CRA 应用程序？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-05-26 15:53:38

解决方案1
1 已采纳 2020-05-26 15:53:38