How to override default media queried component styles?
See original GitHub issueHey 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.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:7
- Comments:7 (2 by maintainers)
Top Results From Across the Web
css - Media Query Styles Not Overriding Original Styles
This was the problem for me. I had my core styles, then page specific mobile styles, then page normal styles, and this was...
Read more >Avoiding CSS overrides in responsive components - GitHub Gist
In this pattern, all styles outside of media queries are either mobile or common styles. We override some of these styles for wider...
Read more >THe media query is overriding the native css? - SitePoint
Look at the design on a desktop and then slowly close the window as the layout compresses there will come a point when...
Read more >Customizing Screens - Tailwind CSS
Overriding the defaults. To completely replace the default breakpoints, add your custom screens configuration directly under the theme key:.
Read more >5 Reasons Why Your CSS Media Queries Are NOT Working ...
Why your CSS Media Queries are not working? CSS Media queries are an important part of Responsive web design but sometimes they don't...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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: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.