Question

我正在尝试使用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％，即使屏幕尺寸很大，右侧的灰色区域也不会填满整个屏幕。

Answer 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)
  },

Material-ui网格：网格项目的宽度太大，超出了网格容器

1 个答案: