My custom makeStyles for MaterialUI Button component is getting overriden by ..css-zln006-MuiButtonBase-root-MuiButton-root

Question

My custom makeStyles for MaterialUI Button component is getting overridden by .css-zln006-MuiButtonBase-root-MuiButton-root.

I have a Material UI Button component:

import { Button } from "@mui/material";
import useStyles from "./HeaderStyles.js";

const Header = () => {
  const classes = useStyles();


  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar disableGutters>
          <Button
            className={classes.button}
            variant="contained"
            color="secondary"
          >
            Click me
          </Button>
        </Toolbar>
      </AppBar>
    </React.Fragment>
  );
};

export default Header;

My HeaderStyles.js file:

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

const useStyles = makeStyles((theme) => ({
  button: {
    fontFamily: "Pacifico",
    textTransform: "none",
    fontSize: "1rem",
    borderRadius: "50px",
    marginLeft: "50px",
    marginRight: "25px",
    height: "45px",
  },
}));

export default useStyles;

My styles are getting overridden by the .css-zln006-MuiButtonBase-root-MuiButton-root class. This class is replacing my button style.

.css-zln006-MuiButtonBase-root-MuiButton-root {
display: '-webkit-inline-box',
display: '-webkit-inline-flex',
display: '-ms-inline-flexbox',
display: 'inline-flex',
WebkitAlignItems: 'center',
WebkitBoxAlign: 'center',
MsFlexAlign: 'center',
alignItems: 'center',
WebkitBoxPack: 'center',
MsFlexPack: 'center',
WebkitJustifyContent: 'center',
justifyContent: 'center',
position: 'relative',
boxSizing: 'border-box',
WebkitTapHighlightColor: 'transparent',
backgroundColor: 'transparent',
outline: '0',
border: '0',
margin: '0',
borderRadius: '0',
padding: '0',
cursor: 'pointer',
WebkitUserSelect: 'none',
MozUserSelect: 'none',
MsUserSelect: 'none',
userSelect: 'none',
verticalAlign: 'middle',
MozAppearance: 'none',
WebkitAppearance: 'none',
WebkitTextDecoration: 'none',
textDecoration: 'none',
color: 'inherit',
fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
fontWeight: '500',
fontSize: '0.875rem',
lineHeight: '1.75',
letterSpacing: '0.02857em',
textTransform: 'uppercase',
minWidth: '64px',
padding: '6px 16px',
borderRadius: '4px',
WebkitTransition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
color: 'rgba(0, 0, 0, 0.87)',
backgroundColor: '#FFBA60',
boxShadow: '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)'
}

My button style

.makeStyles-button-59 {{
height: '45px',
fontSize: '1rem',
fontFamily: 'Pacifico',
marginLeft: '50px',
marginRight: '25px',
borderRadius: '50px',
textTransform: 'none'
}

How to solve this?

Answer 1

@mui/styles is the legacy styling solution for MUI. It is deprecated in v5. It depends on JSS as a styling solution, which is not used in the @mui/material anymore. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

Use sx prop instead

const buttonStyles = {
  borderRadius: 50,
  fontFamily: "Pacifico",
  fontSize: "1rem",
  textTransform: "none",
};

<Button sx={buttonStyles} variant="contained" color="secondary">
  Click me
</Button>