您可以使用 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

以下是正确的语法：

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

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

1. 使用:global(.MuiButton-containedPrimary)。如果不使用:global，CSS 模块会将MuiButton-containedPrimary 转换为该模块唯一的类名，然后它将与Material-UI 放置在按钮上的内容不匹配。

2. 在前面添加& 可以有效地创建一个像.button.MuiButton-containedPrimary 这样的选择器，匹配一个包含两个类的元素。您的原始语法会将 .MuiButton-containedPrimary 视为后代选择器，并且仅匹配属于按钮后代的该类的元素，而不是按钮本身。

Answer 2

您可以使用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>
  );
}