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