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

Question

i just learned the basics of react and react-ui and when i tried to change the color of a material-ui Button, it doesn't work unless i use inline styling:

the button component:

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 styling:

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

inline style:

style={{ backgroundColor: "black" }}

so what do you think the problem is?

Answer 1

You need to import your CSS stylesheet in your MyButton JSX file.

For example, if you store your button CSS styling in a file called styles.css and this file is in the same directory of your MyButton JSX file, add the following line:

import "./styles.css";

So the entire code becomes:

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;