¿Qué puedo hacer para que mis clases de makestyles sean más importantes que el estilo de interfaz de usuario de material predeterminado?

Ese es mi código:

 import { createTheme, ThemeProvider } from '@mui/material/styles'; import { makeStyles, createStyles } from '@mui/styles'; const customTheme = createTheme({ palette: { primary:{ main: '#303030', }, }, components:{ MuiButton:{ styleOverrides: { root: { '&:focus': { background: "#f00", }, '&:hover': { background: "#f00", }, '&::after': { content: '"xd"', color: 'blue', }, }, contained:{ borderRadius:'50%', }, }, variants: [ { props: { variant: 'dashed' }, style: { textTransform: 'none', border: `2px dashed #000000`, }, }, ], }, }, }); const useStyles = makeStyles((theme) => //I tried without createStyles too, no change createStyles({ root: { }, differentButton:{ backgroundColor: 'green', fontSize: '30px', opacity: '80%', }, //tak sie propsy przekazuje foo: (props) => ({ backgroundColor: props.backgroundColor, }), }), ); function App() { const classes = useStyles(); return ( <> <CssBaseline/> <Button className={classes.differentButton}>Different</Button> <RemoveButton variant="contained">Remove Button</RemoveButton> <ThemeProvider theme={customTheme}> <Button className={classes.differentButton}>Different</Button> </ThemeProvider> </> ); }

Está anulado por algo (estilo de interfaz de usuario de material predeterminado, creo que sí)

¿Significa que con la personalización de los componentes de la interfaz de usuario del material no puedo usar makeStyles? Sé que también puedo hacer eso con styled() pero me parece mejor la forma makeStyles.

PD. No quiero usar !important en todas partes jaja