How to Override Material UI CSS Styles React App

Override the default CSS style of any of the Material UI components in our React JS App. Material UI package comes with different UI components and they also have their own default styles. These default CSS styles can be customized or overridden with our changes. Let’s see this with an example.

Related:> Customize AppBar styling in Material UI React App

Material UI CSS Overriding Sample Code

import {  withStyles } from "@material-ui/core";

const ToolBar = withStyles({
  root: {
    minHeight: 55,
  },
})(Toolbar);


const Header = () => {
  const classes = useStyle();
  const logoURL =
    "https://static-assets-web.flixcart.com/www/linchpin/fk-cp-zion/img/flipkart-plus_8d85f4.png";
  const subURL =
    "https://static-assets-web.flixcart.com/www/linchpin/fk-cp-zion/img/plus_aef861.png";

  return (
    <AppBar className={classes.header}>
      <ToolBar>
        <Box className={classes.component}>
          <img src={logoURL} alt="logo" className={classes.logo} />
          <Box className={classes.container}>
            <Typography className={classes.subHeading}>
              Explore{" "}
              <Box component="span" style={{ color: "#FFE500" }}>
                Plus
              </Box>
            </Typography>
            <img src={subURL} alt="" className={classes.subURL} />
          </Box>
        </Box>

        <SearchBar />
      </ToolBar>
    </AppBar>
  );
};

export default Header;

Here in the above example, we are overriding the default CSS style of the Toolbar component of the Material UI. For that, we are using the withStyles. And the overriding sample code is:

import {  withStyles } from "@material-ui/core";

const ToolBar = withStyles({
  root: {
    minHeight: 55,
  },
})(Toolbar);

Default Toolbar is Changed to ToolBar tag.

  return (
    <AppBar className={classes.header}>
      <ToolBar>