In my current React project, I am utilizing MUI and Sass. The issue I am facing is that there are numerous scss files filled with !important declarations to override the MUI styles using Sass. To address this issue, I attempted to eliminate the !important declarations and incorporate the following code snippet:
import { StyledEngineProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline'
<CssBaseline />
<StyledEngineProvider injectFirst>
*** component tree here ***
</StyledEngineProvider>
This approach initially appeared to be working fine, but it ceases to work properly when focusing on a specific component. For instance, a button turns white with a blue border upon hovering over it:
scss
.button {
width: 250px;
height: 50px;
border: 1px solid grey;
border-radius: 15px;
text-transform: none;
}
.go-button {
@extend .button;
background-color: grey;
color: whitesmoke;
}
reactjs
<Button
className="go-button"
variant="outlined"
onClick={handleClick}
>
Go
</Button>
We are not making use of modules or makeStyles. What would be the most effective approach to overriding MUIS styles without relying on !important declarations?