0

I'm now trying to create a website using material-ui with react. I needed to add my own style to mui components. For this purpose, I used the makeStyle from '@mui', But The problem is that if I want to make changes to the material components, I have to use the ( !important ) with each stage.

so here is simple example:

App.js

import { makeStyles } from "@mui/styles";
import { Button } from "@mui/material";

const useStyles = makeStyles({
  btn: {
    backgroundColor: "red !important",
  },
});

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

  return (
    <>
      <Button variant="contained" className={classes.btn}>
        Click me
      </Button>
    </>
  );
}

export default App;

if i want to change the <Button> background i must use !important with css code . so What do I have to do now ???

versions: "@mui/material": "^5.4.4", "@mui/styles": "^5.5.1",

Alan Hasan
  • 15
  • 1
  • 6

1 Answers1

0

If you are starting new app, new MaterialUI version recommend not to use useStyles but use styled-components or EmotionJS. Anyways if you want to use useStyles try to wrap your app in <StylesProvider injectFirst></StylesProvider> from mui. It should inject your styles first and !important shouldnt be needed.

Wraithy
  • 1,722
  • 1
  • 5
  • 13
  • thank you so much for your suggestion, now i am using Styled-component but I've faced the same problem with styled-component, when i want to change the background i must use ( important ) so i asked the question in stackOverflow here is the question, and i'm sorry to upset you but i hope give me a time and asnwering me : https://stackoverflow.com/questions/71627037/styled-components-doesnt-work-with-material-ui – Alan Hasan Mar 26 '22 at 10:09