Material UI - how to remove padding from Container when width becomes xs
I want the Container to have no padding when Container becomes xs.
I tried the following: https://material-ui.com/api/container/, but I can't get it working. If I add root instead of maxWidthXs in StyledContainer then padding becomes 0 for all sizes, but I only want padding to be 0 if Container size is xs.
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Container from "@material-ui/core/Container";
const StyledContainer = withStyles({
maxWidthXs: {
paddingRight: "0",
paddingLeft: "0",
paddingTop: "0",
paddingBottom: "0",
},
root: {},
})(Container);
export default function SimplePaper(props) {
// const classes = useStyles();
return (
<StyledContainer maxWidth="xl" xs={12}>
<Paper
style={{
alignItems: "center",
display: "flex",
justifyContent: "center",
padding: "10px",
}}
elevation={10}
>
{props.children}
</Paper>
</StyledContainer>
);
}
Solution 1:
MUI containers have disableGutters
, which does exactly what you need without the need of restyling the entire component. You could go, for example, with something like:
<Container disableGutters={props.breakpoint === 'xs'}>
More info here: https://mui.com/api/container/#props