What can i do to make my makestyles classes more important than default material ui style?

That's my code:

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>
    </>
  );
}

Its overrided by something (default material ui style i think so)

Does it means that with customizing material ui components i can't use makeStyles? I know that i can do that with styled() too but makeStyles way seems better to me.

Ps. I dont want to use !important everywhere hah