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?
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;