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

user_14005164 0
Viewed 4258

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>
    );
}
material-ui reactjs
3 Answers

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

user_39500520
user_34875790

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