材质 UI 按钮无法覆盖样式答案

【问题标题】：MaterialUI Button Could not override style材质 UI 按钮无法覆盖样式
【发布时间】：2021-05-11 16:58:40
【问题描述】：

无法在 Button 上使用 className 覆盖样式。相同的样式在TextField 上正常工作。使用 style 属性允许覆盖 Button 样式。我错过了什么？

问题链接：https://codesandbox.io/s/bold-dewdney-r6y8u

相同的代码：

import React from "react";
import { Button, TextField } from "material-ui";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  buttonStyle: {
    backgroundColor: "#ADD8E6"
  }
}));

const App = () => {
  const classes = useStyles();

  return (
    <div>
      <Button className={classes.buttonStyle}>Failed Submit</Button>
      <Button style={{ backgroundColor: "#CACACA" }}>Working Submit</Button>
      <br />
      <br />
      <TextField className={classes.buttonStyle} label="Name" />
    </div>
  );
};

export default App;

【问题讨论】：

您正在从错误的包中导入Button。请看这个帖子：stackoverflow.com/questions/56875498/…
您似乎开始将沙箱更改为使用@material-ui/core 而不是material-ui；但是，您使用的是 v5 的 alpha 而不是稳定的 v4 版本。使用 v4，您的代码可以正常工作：codesandbox.io/s/wonderful-meitner-9u38d?file=/src/App.js.
谢谢@RyanCogswell，你是对的。将库从 material-ui 更改为 @material-ui/core 后，即使是 alpha-24 版本，一切正常。

标签： css reactjs button material-ui styles

【解决方案1】：

您应该在 css 样式中使用 !important 键盘。

const useStyles = makeStyles((theme) => ({
 buttonStyle: {
  backgroundColor: "#ADD8E6 !important"
 }
}));

【讨论】：

通过style prop 应用的样式文件。问题在于“提交失败”按钮。 buttonStyle 中的 backgroundColor 未应用于“提交失败”按钮。
我更新了答案，希望对您有所帮助。您需要将 !important 属性添加到 json 对象样式。 buttonStyle: { backgroundColor: "#ADD8E6 !important" }
感谢您的回答。有什么理由为什么使用 className 的样式适用于许多组件（例如：TextField），但不适用于 Button？
好吧，样式会覆盖类，因为首先加载了类 css，然后加载了样式 css。该类在 Button 上工作的原因可能（您可以在 devtools 中检查）在 material-ui css 中有一个 !important 但是，您的本地 !important 覆盖了主题 !important 标记...只是推测，但是您可以检查什么material-ui 用于验证。
我没有太多使用material-UI的经验，但是通常style props往往比className有更多的层次相关性，大多数时候style prop不需要使用“！important”键盘导致CSS属性直接应用于组件本身，对不起我的英语

【解决方案2】：

实际上要简单得多。创建任意样式对象：

const style = {
  backgroundColor: "#ADD8E6"
};

将其应用于您的按钮：

<Button style={style}>Failed Submit</Button>

沙盒：https://codesandbox.io/s/funny-poitras-e1s3y?file=/src/App.js

【讨论】：

【解决方案3】：

如果不想使用material-UI覆盖系统，可以使用styled-components styled-components覆盖，简单多了

【讨论】：