Material UI - how to remove padding from Container when width becomes xs

Question

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>
    );
}

score 8 · Answer 1 · answered Jan 12 '22 at 14:30

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

score 2 · Answer 2 · answered Jan 14 '22 at 19:12

This helped me MUI v5:

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

...

 const theme = useTheme();

..

<Container disableGutters={useMediaQuery(theme.breakpoints.only('xs'))}>

https://mui.com/components/use-media-query/#using-muis-breakpoint-helpers https://mui.com/customization/breakpoints/#theme-breakpoints-only-key-media-query

score 0 · Answer 3 · answered Jul 28 '20 at 17:00

Breakpoints would be one way to do it:

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((props) => {
    return ({
        root: {
            paddingRight: "10px",
            paddingLeft: "10px",
            backgroundColor: "green",
            [props.breakpoints.only('xs')]: {
                paddingRight: "0",
                paddingLeft: "0",
            },
        },
    })
})(Container);

export default function SimplePaper(props) {
    // const { classes } = props;

    return (
        <StyledContainer maxWidth="xl" xs={12}>
            <Paper
                style={{
                    alignItems: "center",
                    display: "flex",
                    justifyContent: "center",
                    padding: "10px",
                }}
                elevation={10}
            >
                {props.children}
            </Paper>
        </StyledContainer>
    );
}

Material UI - how to remove padding from Container when width becomes xs

3 Answers3