material-ui 按钮颜色不会通过 css 样式改变

Question

我刚刚学习了 react 和 react-ui 的基础知识，当我尝试更改 material-ui 按钮的颜色时，它不起作用，除非我使用内联样式：

按钮组件：

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

function MyButton() {
  return (
    <Button
      // style={{ backgroundColor: "black" }}
      variant="contained"
      color="primary"
      className="signUp"
    >
      Sign Up
    </Button>
  );
}
export default MyButton;

css 造型：

.signUp{
    background-color : black;
    color : yellow;
    filter: drop-shadow(0px 8px 8px white);
    float:right;
    }

内联样式：

style={{ backgroundColor: "black" }}

那你觉得问题是什么？

Answer 1

您需要在 MyButton JSX 文件中导入 CSS 样式表。

例如，如果您将按钮 CSS 样式存储在名为 styles.css 的文件中，并且该文件与 MyButton JSX 文件位于同一目录中，请添加以下行:

import "./styles.css";

所以整个代码变成：

import React from "react";
import Button from "@material-ui/core/Button";
import "./styles.css"; // Add this line!

function MyButton() {
  return (
    <Button variant="contained" color="primary" className="signUp">
      Sign Up
    </Button>
  );
}
export default MyButton;

material-ui 按钮颜色不会通过 css 样式改变

material-ui Button color won't change through css styling

javascript

css

components

reactjs

material-ui