How to over-ride an @media css for a material-ui react component

user_924369 0
Viewed 10108

In this question I asked how to override a css property of a material-ui component and was provided a nice example. However, when trying to set the height of the Toolbar component I found I could not override the css due to an over arching @media specification. The following MuiTheme spec was my approach:

const theme = createMuiTheme({
    overrides: {
        MuiToolbar: {
            regular: {
               height: "32px",
               minHeight: "32px"
        }
    },
  }
});

Here is a visual of the css being over-ridden:

enter image description here

If I introduce a hack and add !important to the minHeight it works. A codesandbox showing this is here: https://codesandbox.io/s/4xmr2j2ny9

What is the proper way to overide an @media spec using MuiTheme?

material-ui reactjs css
3 Answers

You have to add it like below. The media query statement should be enclosed in single quotes.

 MuiToolbar: {
      regular: {
        backgroundColor: "#ffff00",
        color: "#000000",
        height: "32px",
        minHeight: "32px",
        '@media (min-width: 600px)': {
          minHeight: "48px"
        }
      },

Please find the codesandox - https://codesandbox.io/s/q8joyrrrwj

user_63473170

For the record, the latest solution for "@mui/material": "5.0.4", combined from https://stackoverflow.com/a/52044661/646105 and @jannnik comment, would be:

const defaultTheme = createTheme();

const theme = createTheme({
  components: {
    MuiToolbar: {
      regular: {
        backgroundColor: "#ffff00",
        color: "#000000",
        height: "32px",
        minHeight: "32px",
        [defaultTheme.breakpoints.up('sm')]: {
          minHeight: "48px"
        }
      },
   }
});
user_6461050

MuiThemeProvider is optional for v1.x material-ui and We use the higher-order component created by withStyles to inject an array of styles into the DOM as CSS, Here is working example without changing @media annotation:

https://codesandbox.io/s/7klzx84z71

user_62585130
Related