Material UI - 当宽度变为 xs 时如何从容器中删除填充

Question

我希望当 Container 变成 xs 时 Container 没有填充。

我尝试了以下操作： https: //material-ui.com/api/container/，但我无法让它工作。如果我在 StyledContainer 中添加 root 而不是 maxWidthXs，则所有尺寸的 padding 都会变为 0，但如果 Container 尺寸为 xs，我只希望 padding 为 0。

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

Answer 1

MUI 容器具有disableGutters，它可以完全满足您的需要，而无需重新设计整个组件。例如，您可以使用以下内容：

<Container disableGutters={props.breakpoint === 'xs'}>

更多信息请参见： https: //mui.com/api/container/#props

Answer 2

断点是一种方法：

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