Material-ui Grid：网格项的宽度太大并且超出了 Grid 容器答案

【问题标题】：Material-ui Grid: Grid item's width too big and going outside of Grid containerMaterial-ui Grid：网格项的宽度太大并且超出了 Grid 容器
【发布时间】：2020-05-15 01:34:39
【问题描述】：

我正在尝试使用 Material-ui 和 React 为 SPA 设置一个简单的布局。我的想法是有一个左侧栏作为侧边栏和一个右侧主要区域来呈现信息等。但是，在我目前的设置中，我有两个问题： <Grid item> 及其容器 <Button> 元素超出左侧边栏 <Grid container item xs={3} className={classes.sideBarGrid}> 延伸到右侧列。我不确定我做错了什么，任何帮助将不胜感激！

Code Sandbox

另外，即使我将右侧网格列 <Grid container item xs={9} className={classes.labelGrid}> 设置为全宽，我也无法将其设置为 width: "100%"。

代码：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles(theme => ({
  mainContainer: {
    width: "100vw",
    height: "100vh"
  },
  labelGrid: {
    flexGrow: 1,
    flexDirection: "column",
    backgroundColor: "#EBEDF0",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  },
  sideBarGrid: {
    maxWidth: 300,
    flexDirection: "column",
    justifyContent: "space-between"
  },

  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main
  },
  labelarea: {
    margin: theme.spacing(1)
  },
  imagearea: {
    minHeight: 200
  },
  classButton: {
    margin: theme.spacing(1)
  },
  submit: {
    margin: theme.spacing(1)
  },
  commentField: {
    margin: theme.spacing(2, 2, 3)
  }
}));

export default function Labelscreen(props) {
  const classes = useStyles();

  // history for react router

  // array with potential classes for image
  const buttonText = ["one", "two"];

  // function to filter list of labels by property and see if object property is null

  return (
    <Grid container className={classes.mainContainer}>
      <CssBaseline />

      <Grid container item xs={3} className={classes.sideBarGrid}>
        <Grid item>
          {buttonText.map((item, key) => (
            <Button
              className={classes.classButton}
              variant="outlined"
              color="primary"
              fullWidth
            >
              {item} ({key + 1})
            </Button>
          ))}

          <TextField
            id="imageComment"
            label="Comment"
            placeholder="please put comments here"
            multiline
            fullWidth
            variant="outlined"
            value="adfljdaf"
          />
        </Grid>

        <Grid item>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="secondary"
            className={classes.submit}
          >
            Go back
          </Button>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Next
          </Button>
        </Grid>
      </Grid>
      <Grid container item xs={9} className={classes.labelGrid}>
        <Typography component="h1" variant="h5">
          Something
        </Typography>
      </Grid>
    </Grid>
  );
}

编辑

即使width在labelGrid中设置为100%，当屏幕尺寸较大时，右侧的灰色区域也不会填满整个屏幕

【问题讨论】：

我不确定我是否理解右侧 100% 宽度的部分，但您在其他部分得到了答案。请解释右侧部分。
感谢您解决我的问题的第一部分。我编辑了上面的问题以指定我的第二个问题。基本上，我希望正确的盒子全宽，我很困惑为什么 width:100% 没有发生这种情况。
右框没有全宽的原因是您正在寻找的结构与网格结构不匹配。当您想将页面拆分为已知的列数（和已知的宽度/%）时，您应该使用网格。这不完全是你的情况。

标签： css react-native flexbox material-ui

【解决方案1】：

您的按钮有边距（左右），因此它们会超出您的左侧边栏。
您可以使用以下方法解决此问题：

  classButton: {
    margin: theme.spacing(1, 0)
  },
  submit: {
    margin: theme.spacing(1, 0)
  },

要添加左右两侧的空间，您可以在容器上添加填充：

  sideBarGrid: {
    maxWidth: 300,
    flexDirection: "column",
    justifyContent: "space-between",
    padding: theme.spacing(0, 1)
  },

【讨论】：