The Material UI Container has a useful prop for disabling padding, but it does not have access to some of the spacing props that the Stack component has. In this post we will add padding, margin, background color, and border to the Container component using the sx prop.
This post uses the same base code as the “Create Max Width, Fixed Width, and Full Width MUI Containers” post. Clicking this link will take you to the base code for both posts.
MUI Container Nested Selectors
I created three Containers that have almost identical JSX. Here’s an example:
<Container
maxWidth="sm"
sx={styles.container}
>
<Typography
component="div"
sx={{...styles.typography, backgroundColor: 'blue'}}
/>
</Container>Each Container is given a different maxWidth. All three containers only have styles.container styling applied. IMPORTANT: inside of styles.container, I make use of the different classes that get applied for each maxWidth.
Here are the nested selectors:
container: {
backgroundColor: "rgba(0,0,0,.4)",
"&.MuiContainer-maxWidthSm": {
//padding: 0 use this or use disableGutters={true}
},
"&.MuiContainer-maxWidthMd": {
border: "2px solid black",
borderRadius: 4,
maxWidth: 1000,
"&:hover": {
border: "4px solid green"
}
},
"&.MuiContainer-maxWidthLg": {
marginTop: "8px", //if marginLeft or marginRight is changed, grid container won't center
marginBottom: "8px"
}
}This abstracts the styling and it would be a good opportunity to use the styled API.
Material UI Container Padding
There is a handy prop for removing padding. Also, padding can be controlled through the sx prop.
MUI Container with No Padding
Left and right padding can be removed on containers with the disableGutters={true} prop:
<Container
maxWidth="sm"
sx={styles.container}
disableGutters={true} //same as setting padding: 0 in class
>Alternatively, I could simply override the padding with padding: 0 in the sx prop.
MUI Container with Custom Padding
We can add custom padding to the top, right, bottom, or left. Here’s an example with padding bottom:
"&.MuiContainer-maxWidthSm": {
//padding: 0 use this or use disableGutters={true}
pb: 2 //paddingBottom: 2
}In this case I used the pb shorthand from the MUI CSS utilities.
The code above added 16px of padding to the bottom of the container. The blue area is a child Typography component and the grey is the container background (visible because of the padding).
Material UI Container Margin
In the large container, I set marginTop and marginBottom to 8px using CSS.
"&.MuiContainer-maxWidthLg": {
marginTop: "8px",
marginBottom: "8px"
}However, if I try to set marginLeft or marginRight, it will remove the automatic centering of the component. This is because margin ‘auto’ was applied by MUI to center the container, as we can see in the dev tools screenshot above.
Material UI Container Background Color
In my root container styling object, I added a grey background color:
container: {
backgroundColor: "rgba(0, 0, 0, 0.4)"
}However, this is mostly not visible because each container has a Typography component inside that has a background color set. The only time we see the container background color is if the container has padding or if the Typography didn’t take the full size (which I don’t have an example of in this demo).
Material UI Container Border
I set border on the second container and change the border style on hover over the container:
"&.MuiContainer-maxWidthMd": {
border: "2px solid black",
borderRadius: 4,
"&:hover": {
border: "4px solid green"
}
}Notice the syntax in the hover selector. The spacing and colon must be very precise. A space would indicate the selector is looking for a child element. Also, the colon means that hover is a pseudo-class.
Resources
Check out these related posts:
