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

Posted 2023-02-23

【中文标题】material-ui 按钮颜色不会通过 css 样式改变

【英文标题】：material-ui Button color won't change through css styling

【发布时间】：2021-08-01 08:03:38

【问题描述】：

我刚刚学习了 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" 

那么你认为问题是什么？

【问题讨论】：

您需要将 CSS 导入您的按钮组件或使用 MUI 的样式方法之一（例如 withStyles、makeStyles）

我会试试的，我认为material-ui组件的功能与我创建的其他组件一样，这意味着它们会接受className，如果不是这样，你能告诉我区别吗？谢谢

是的，他们接受className，但是如果你没有将它导入组件，className 怎么知道你指的是哪个类？

【参考方案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;