您可以使用 css/scss 覆盖 Material UI 中的样式吗？

Question

目前我正在使用 SCSS，因为它很容易与 NextJS 一起使用。我真的很喜欢这个系统的工作方式，使用 SCSS 模块，所以我也想在使用 Material-UI 时使用它。 Material-UI使用JSS，每次都要写很多样板文件。此外，我不喜欢使用两种样式化方式（SCSS 模块和 JSS）。我已经更改了 CSS 注入的顺序，这样我就可以在 Material-UI 组件上使用我的 SCSS 模块。但是，我想知道是否有办法使用 SCSS 模块覆盖 Material-UI 组件的样式？我尝试了以下和一些类似的东西，但似乎没有任何效果：

import styles from "./Login.module.scss";

import Button from "@material-ui/core/Button";

function Login() {
  return (
    <section>
        <Button className={styles.button} variant="contained" color="primary">
          Verify
        </Button>
    </section>
  );
}

export default Login;

.button {
  padding: 10px;
  margin-bottom: 10px;
  .MuiButton-containedPrimary {
    border: 2px solid red;
    background-color: red;
  }
}

Answer 1

您可以使用 makeStyles 个 @material-ui。并传递给 classes 以覆盖 CSS 默认值 material-ui.

import { makeStyles } from "@material-ui/styles";

const useStyle = makeStyles(() => ({
  root: {
    padding: "10px",
    marginBottom: "10px",
  },
  containedPrimary: {
    border: "2px solid red",
    backgroundColor: "red"
  }
}))

function Login() {
  const classes = useStyle();
  return (
    <section>
        <Button classes={classes} variant="contained" color="primary">
          Verify
        </Button>
    </section>
  );
}

Answer 2

以下是正确的语法：

.button {
  padding: 10px;
  margin-bottom: 10px;
  &:global(.MuiButton-containedPrimary) {
    border: 2px solid red;
    background-color: red;
  }
}

上面的例子有两个关键的变化：

使用 :global(.MuiButton-containedPrimary)。如果不使用 :global，CSS 模块会将 MuiButton-containedPrimary 转换为此模块独有的 class 名称，然后它将与 Material-UI 按下按钮。
在前面添加 & 有效地创建了一个像 .button.MuiButton-containedPrimary 这样的选择器来匹配同时具有两个 class 的元素。您的原始语法会将 .MuiButton-containedPrimary 视为后代选择器，并且仅匹配具有 class 的元素，这些元素是按钮的后代而不是按钮本身。

您可以使用 css/scss 覆盖 Material UI 中的样式吗？

Can you overwrite styles in Material UI using css/scss?

reactjs

sass

material-ui

next.js

jss