Overriding existing Mui classes using makeStyles

Question

So, this can be a very minute implementation issue on my end I think. I used to keep stylesheets completely separate from my component.js file but lately, I started to see some benefits of writing styles inside the component with styled components, emotions, make styles, etc. I tried it on a dummy project and started to implement it out on some components on an app I am working on right now. The reasons were primarily more manageable, dev-experience, and it worked for me.

But then I found myself in this issue of overriding existing mui styles.

For example, I am using material-ui to make this accordion component. And there is a nested property

.MuiAccordionSummary-root.Mui-expanded {
    min-height: 64px;
}

To edit this is my sass file would be very easy but how do I make it work with make styles?

My current styles look like this

const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    marginBottom: '16px',
    maxHeight: '35px',
  },
  summary: {
    backgroundColor: theme.palette.complimentory.main,
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    maxHeight: '35px',
    height: '35px',
  },
  title: {
    fontFamily: 'Helvetica',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '14px',
    letterSpacing: '0.266667px',
    textTransform: 'uppercase',
  },
  content: {
    marginTop: '15px',
    fontSize: '14px',
    fontStyle: 'normal',
    lineHeight: '16.8px',
    letterSpacing: '0.375px',
    fontWeight: '400',
    fontFamily: 'Helvetica',
    textAlign: 'left',
  },
}))

I am struggling to target it inside makestyles, I think it must be possible, I just am having a hard time as I am not used to it.

Answer 1

You should use <StyledEngineProvider injectFirst> at the root of you project

import { render } from "react-dom";
import { StyledEngineProvider } from "@mui/material";
import App from "./App";

const rootElement = document.getElementById("root");
render(
  <StyledEngineProvider injectFirst>
    <App />{" "}
  </StyledEngineProvider>,
  rootElement
);

import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import makeStyles from "@mui/styles/makeStyles";

const useStyles = makeStyles((theme) => {
  return {
    root: {
      backgroundColor: "red",
      color: "pink"
    }
  };
});

export default function App() {
  const classes = useStyles();
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" className={classes.root}>
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

Working demo here https://codesandbox.io/s/wizardly-stonebraker-qnh3t

Answer 2

I'll use the AccordionSummary as an example on how to override existing styles. The Accordion Summary has 6 CSS rules that can be overridden: root, expanded, focused, disabled, content and expandIcon. You can see this at the CSS section of the AccordionSummary API page in Material UI's official documents. Each of these correspond to a Material UI class for the respective component e.g. root for the AccordionSummary corresponds to the class .MuiAccordionSummary-root. To override these styles, you do it via overriding styles with classes.

Using your example:

1. Create the class name and add the styling in makeStyles. I'll create one called summaryExpanded and will include the styling minHeight: '64px'.

const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    marginBottom: '16px',
    maxHeight: '35px',
  },
  summary: {
    backgroundColor: theme.palette.complimentory.main,
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    maxHeight: '35px',
    height: '35px',
  },
  summaryExpanded: {
    minHeight: '64px',
  },
  title: {
    fontFamily: 'Helvetica',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '14px',
    letterSpacing: '0.266667px',
    textTransform: 'uppercase',
  },
  content: {
    marginTop: '15px',
    fontSize: '14px',
    fontStyle: 'normal',
    lineHeight: '16.8px',
    letterSpacing: '0.375px',
    fontWeight: '400',
    fontFamily: 'Helvetica',
    textAlign: 'left',
  },
}))

2. Override the style in the AccordionSummary component by accessing the relevant rule name and assigning your custom class. In this case, it is expanded, as we are looking to override .Mui-expanded in the AccordionSummary component.

const classes = useStyles();

<Accordion>
  <AccordionSummary
    classes: {{
      expanded: classes.summaryExpanded,
    }}
  >
  </AccordionSummary>
  <AccordionDetail>
  </AccordionDetail>
</Accordion>

Answer 3

You can do something like this - play around override properties.

import { Overrides } from "@material-ui/core/styles/overrides";

const overrides: Overrides = {
  MuiExpansionPanelSummary: {
    root: {
      minHeight: "3.25rem",
      "&$expanded": {
        minHeight: "3.25rem",
      },
    },
    content: {
      margin: "0.25rem",
      "&$expanded": {
        margin: "0.25rem",
      },
    },
    expandIcon: {
      padding: "0.5rem",
    },
    expanded: {},
  },
};