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

Question

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:

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?

Usually css consider the last update of the css. For an example if your have a css on line 5 and another one on line 10, but both the same element and same property. Then css consider the line 10th one is the valid one. That's how your css is over ridden.Arrange the code properbly like the media query for largest device on the top and smaller device after it. — Ramesh
– Ramesh, Commented Aug 27, 2018 at 16:17
Good point, however, this is not a regular css file but a theme override for material-ui.com components. My question relates to how to specify (if possible) an @media replacement for the Toolbar component using their theme over-ride capability. — Glenn
– Glenn, Commented Aug 27, 2018 at 16:49

Vijay Venugopal Menon · Accepted Answer · 2018-08-27 22:39:19Z

26

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

edited Aug 27, 2018 at 22:39

answered Aug 27, 2018 at 17:58

Vijay Venugopal Menon

1,5301 gold badge14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Glenn Over a year ago

This works nicely! Your code sandbox link however points to a different solution. Please update or remove your sandbox link and I'll mark this as the answer.

Vijay Venugopal Menon Over a year ago

Sorry Glenn, i updated the same codesandbox for another question. I have created a new CodeSandbox with the required solution.

jannnik Over a year ago

The bad thing about this solution is that we need to know which media query we need to override. If the component's internal code changes, the theme override will lose its effect. This can be solved with something like [defaultTheme.breakpoints.up('md')]: { insted of '@media (min-width: 600px)': {

Titenis · Accepted Answer · 2021-10-20 11:32:07Z

4

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"
        }
      },
   }
});

answered Oct 20, 2021 at 11:32

Titenis

88713 silver badges16 bronze badges

Comments

Sakhi Mansoor · Accepted Answer · 2018-08-27 18:00:13Z

0

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

answered Aug 27, 2018 at 18:00

Sakhi Mansoor

8,1325 gold badges24 silver badges38 bronze badges

2 Comments

Glenn Over a year ago

This works when doing a single element but I want to have it apply to all instances of Toolbar without having to code it into each component that uses it. The solution from Vijay allows it to be applied at a global theme level which is what I'm looking for.

Sakhi Mansoor Over a year ago

Yes in that case Vijay approach is feasible. I second that. Actually I my solution was to customise your toolbar individually if that’s the case. But in your case you want sane styles to be applied on all toolbars. Anyways good work ))

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related