时间戳

首页 > 解决方案 > Material UI - 当宽度变为 xs 时如何从容器中删除填充

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

问题描述

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

我尝试了以下方法：https://material-ui.com/api/container/，但我无法让它工作。如果我在 StyledContainer 中添加 root 而不是 maxWidthXs，则所有尺寸的填充都变为 0，但如果容器尺寸为 xs，我只希望填充为 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>
    );
}

标签： reactjsmaterial-ui

解决方案

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

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

更多信息在这里：https ://mui.com/api/container/#props

推荐阅读