How to override Material UI .MuiContainer-maxWidthLg?
10,982
Solution 1
The maxWidth
prop of Container
defaults to 'lg', but you can prevent Material-UI trying to control the max width of the Container
by setting maxWidth={false}
.
Here's a simple example:
import React from "react";
import Container from "@material-ui/core/Container";
import Paper from "@material-ui/core/Paper";
export default function App() {
return (
<Container maxWidth={false}>
<Paper>
<h1>Hello CodeSandbox</h1>
</Paper>
</Container>
);
}
Related documentation: https://material-ui.com/api/container/#props
Code reference: https://github.com/mui-org/material-ui/blob/v4.9.13/packages/material-ui/src/Container/Container.js#L88
Solution 2
You can still achieve this with makeStyles
:
const useStyles = makeStyles((theme) => ({
root: {
[theme.breakpoints.up('lg')]: {
maxWidth: <YourMaxWidth>px,
},
},
}))
Solution 3
const theme = createMuiTheme({
breakpoints: {
values: {
xs: ,
sm: ,
md: ,
lg: ,
xl: ,
xxl:
}
}
});
export default theme;
//And add to app.js
import { ThemeProvider } from "@material-ui/core/styles";
import theme from "style/theme";
<ThemeProvider theme={theme}>
//yourCode
</ThemeProvider>
Author by
Alex Chernilov
Updated on June 14, 2022Comments
-
Alex Chernilov almost 2 years
I'm trying to get rid of max-width that present in the theme.
This is what I see in Chrome (and if I uncheck it, it does what I need):@media (min-width: 1280px) .MuiContainer-maxWidthLg { max-width: 1280px; }
How can I do this? I tried something like this:
const useStyles = makeStyles(theme => ({ root: { '& .MuiContainer-maxWidthLg' : { maxWidth: //No matter what I put here, it does not work },
but it does not seem to have any effect... How can I override this?
Thanks,
Alex
-
SwissCodeMen over 3 yearsPlease add a explanation for your code snipped. Just code isn't that meaningful then with explanation.
-
RedKlouds over 2 yearsmissed this reading the docs, thank you!
-
Finch almost 2 yearsThis answers the question better.