Reactjs 如何用类和css模块覆盖样式？

集中、检查的类似乎不能正常工作。 我需要一直使用！重要提示或使用材质ui提供的jss样式。 例如：

CssModulesButton.module.css

.checkboxtest {
  color: blue;
}

.checkboxtestworking {
  color: blue !important;
}

import React from "react";
// webpack, parcel or else will inject the CSS into the page
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox/Checkbox";

export default function CssModulesButton() {
  return (
    <div>
      <Checkbox classes={{ checked: styles.checkboxtest }}>testasd</Checkbox>
      <Checkbox classes={{ checked: styles.checkboxtestworking }}>
        testasd
      </Checkbox>
    </div>
  );
}

import React from "react";
import { render } from "react-dom";
import { StylesProvider } from "@material-ui/core/styles";
import CssModulesButton from "./CssModulesButton";
import CssBaseline from "@material-ui/core/CssBaseline";

const App = () => <CssModulesButton />;

render(<App />, document.querySelector("#root"));

import React from "react";
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox";

export default function CssModulesButton() {
  return (
    <div>
      <Checkbox className={styles.checkboxtest} />
    </div>
  );
}

CssModulesButton.js

.checkboxtest {
  color: blue;
}

.checkboxtestworking {
  color: blue !important;
}

import React from "react";
// webpack, parcel or else will inject the CSS into the page
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox/Checkbox";

export default function CssModulesButton() {
  return (
    <div>
      <Checkbox classes={{ checked: styles.checkboxtest }}>testasd</Checkbox>
      <Checkbox classes={{ checked: styles.checkboxtestworking }}>
        testasd
      </Checkbox>
    </div>
  );
}

import React from "react";
import { render } from "react-dom";
import { StylesProvider } from "@material-ui/core/styles";
import CssModulesButton from "./CssModulesButton";
import CssBaseline from "@material-ui/core/CssBaseline";

const App = () => <CssModulesButton />;

render(<App />, document.querySelector("#root"));

import React from "react";
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox";

export default function CssModulesButton() {
  return (
    <div>
      <Checkbox className={styles.checkboxtest} />
    </div>
  );
}

从“React”导入React；
//webpack、packet或其他将CSS注入页面
从“/CssModulesButton.module.css”导入样式；
从“@material ui/core/Checkbox/Checkbox”导入复选框；
导出默认函数CssModulesButton（）{
返回(
遗嘱
遗嘱
);
}

index.js

.checkboxtest {
  color: blue;
}

.checkboxtestworking {
  color: blue !important;
}

import React from "react";
// webpack, parcel or else will inject the CSS into the page
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox/Checkbox";

export default function CssModulesButton() {
  return (
    <div>
      <Checkbox classes={{ checked: styles.checkboxtest }}>testasd</Checkbox>
      <Checkbox classes={{ checked: styles.checkboxtestworking }}>
        testasd
      </Checkbox>
    </div>
  );
}

import React from "react";
import { render } from "react-dom";
import { StylesProvider } from "@material-ui/core/styles";
import CssModulesButton from "./CssModulesButton";
import CssBaseline from "@material-ui/core/CssBaseline";

const App = () => <CssModulesButton />;

render(<App />, document.querySelector("#root"));

import React from "react";
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox";

export default function CssModulesButton() {
  return (
    <div>
      <Checkbox className={styles.checkboxtest} />
    </div>
  );
}

从“React”导入React；
从“react dom”导入{render}；
从“@material ui/core/styles”导入{StylesProvider}”；
从“/CssModulesButton”导入CssModulesButton；
从“@material ui/core/CssBaseline”导入CssBaseline；
常量应用=（）=>；
render（，document.querySelector（#root））；

除了使用，我不能用任何其他方式覆盖复选框颜色！重要的。 当使用class={{focused:styles.focused}和许多其他类时，问题仍然存在

有没有一种方法可以简单地用类覆盖组件，而不使用！重要吗？有时甚至！重要的事情不起作用

---

inb4我使用injectFirst

您在问题中提到的

injectFirst

，尽管您的沙盒示例没有使用它。您应该使用它，因为这将确保CSS模块中的CSS插入

元素中的材质UI CSS之后。如果相同，则稍后出现的样式将胜过较早的样式

复选框的颜色如下所示：

  colorSecondary: {
    '&$checked': {
      color: theme.palette.secondary.main,
      '&:hover': {
        backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: 'transparent',
        },
      },
    },
    '&$disabled': {
      color: theme.palette.action.disabled,
    },
  },

以下是JSS生成的相应CSS：

.MuiCheckbox-colorSecondary.Mui-checked {
  color: #f50057;
}
.MuiCheckbox-colorSecondary.Mui-disabled {
  color: rgba(0, 0, 0, 0.26);
}
.MuiCheckbox-colorSecondary.Mui-checked:hover {
  background-color: rgba(245, 0, 87, 0.04);
}
@media (hover: none) {
  .MuiCheckbox-colorSecondary.Mui-checked:hover {
    background-color: transparent;
  }
}

需要注意的重要方面是，

checked

样式是通过两个类完成的。为了覆盖这些样式，您需要相同程度或更高的特殊性

下面是一个覆盖复选框的

checked

颜色的完整工作示例：

index.js（这里的重要部分是

）

CssModulesButton.js

.checkboxtest {
  color: blue;
}

.checkboxtestworking {
  color: blue !important;
}

import React from "react";
// webpack, parcel or else will inject the CSS into the page
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox/Checkbox";

export default function CssModulesButton() {
  return (
    <div>
      <Checkbox classes={{ checked: styles.checkboxtest }}>testasd</Checkbox>
      <Checkbox classes={{ checked: styles.checkboxtestworking }}>
        testasd
      </Checkbox>
    </div>
  );
}

import React from "react";
import { render } from "react-dom";
import { StylesProvider } from "@material-ui/core/styles";
import CssModulesButton from "./CssModulesButton";
import CssBaseline from "@material-ui/core/CssBaseline";

const App = () => <CssModulesButton />;

render(<App />, document.querySelector("#root"));

import React from "react";
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox";

export default function CssModulesButton() {
  return (
    <div>
      <Checkbox className={styles.checkboxtest} />
    </div>
  );
}

---

至于问题的第二部分（“那么类的目的是什么？”），使用

classes

prop有两个主要原因。

类

道具的一些CSS类将应用于组件内的不同元素，而一些仅在组件处于特定状态或组件上使用了某些道具时应用。在本例中，您试图针对组件的特定状态确定这些样式。在v3材质UI中，您需要使用

classes

prop来提供仅应用于

checked

状态的类名，但在v4材质UI中，切换为使用这些状态的全局类名（更多详细信息如下：），例如

Mui checked

。这使得通过单个生成的类更容易针对这些状态（此更改的一个主要驱动因素是使使用

样式化组件

）定制材质UI组件更容易）。

您能解释一下为什么我不能使用类吗？是否应将NT类={checked:styles.AnyClass}}成功覆盖样式？我明白为什么没有，但是上课的目的是什么呢？@Jaaneek我在结尾补充了一些进一步的解释。