How to override default media queried component styles?

Hey there,

so the only way i could find to do it in createMuiTheme() is:

overrides: {
  MuiToolbar: {
      gutters: {
        '@media (min-width: 600px)': {
          paddingLeft: 0,
          paddingRight: 0,
        },
      },
    },
  }

Problem here is that i need to come up with my own breakpoint values while it should rather use the [theme.breakpoints.up('sm')] approach of makeStyles(), using the default themes’ breakpoint presets as values.

Is something like this or equivalent possible? If not, could this maybe be put on the ToDo list. I noticed a lot of people requiring this.

Thanks in advance.

[oliviertassinari]

You can find more details on #11649. However, I think that we can improve the documentation in the meantime (before changing the theme structure or the code in v5). I believe that we should have a customization section in https://material-ui.com/customization/breakpoints/ to answer you very question.

[oliviertassinari]

Rereading the original issue of @nicohagen, it looks like we are already covering it in more detail: #21757.

@robations Bootstrap has a responsive-font-size() function to generate custom values. If Material-UI was exposing a lower-level method, would it help? Maybe something to do:

components: {
  MuiToolbar: {
    styleOverrides: {
      gutters: {
        ...responsiveFontSize({ fontSize: 17 }),
      },
    },
  },
}

We have faced a similar issue in https://github.com/mui-org/material-ui/blob/e0b10d72d9e530dca56eefd08b49fe6141c523cf/docs/src/modules/branding/BrandingRoot.tsx#L185-L195 to implement the new branding: https://next.material-ui.com/branding/about/.

In any case, I’m closing as we are going off-topic.