javascript - 如何在Material ui中保持一致的宽度

Question

我有两个目标组件，但我不知道是什么导致它们的宽度以这种方式表现

我尝试将纸张选择器的宽度设置为 100%，但它对每个目标组件没有影响。 如何在该目标组件的每一侧响应地设置一致的宽度？可能是这样的......黑框代表网页，红框代表目标组件

下面列出了当前代码以供引用:

import React, { useEffect } from "react";
import Moment from "react-moment";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { getGoals } from "../../actions/goal";
import Spinner from "../layout/Spinner";
import Navbar from "../dashboard/Navbar";
import ThumbUpAltIcon from "@material-ui/icons/ThumbUpAlt";
import ThumbDownAltIcon from "@material-ui/icons/ThumbDownAlt";
import ChatIcon from "@material-ui/icons/Chat";
import DeleteIcon from "@material-ui/icons/Delete";
import DoneIcon from "@material-ui/icons/Done";
import {
  Typography,
  Container,
  CssBaseline,
  makeStyles,
  Grid,
  Avatar,
  Paper
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  paper: {
    height: "auto"
  },
  actionButtons: {
    marginTop: "3vh"
  },
  profileHeader: {
    textAlign: "center",
    marginBottom: 20
  },
  avatar: {
    width: theme.spacing(7),
    height: theme.spacing(7)
  }
}));

const Goals = ({ getGoals, auth, goal: { goals, user, loading } }) => {
  useEffect(() => {
    getGoals();
  }, [getGoals]);

  const classes = useStyles();

  return loading ? (
    <>
      <Navbar />
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Spinner />
        </div>
      </Container>
    </>
  ) : (
    <>
      <CssBaseline />
      <Navbar />
      <main>
        <Container>
          <Typography variant="h2" className={classes.profileHeader}>
            Goals
          </Typography>
          {/* parent grid */}
          <Grid container spacing={4}>
            {goals.map(singleGoal => (
              <Paper key={singleGoal._id}>
                <Grid
                  className={classes.paper}
                  spacing={1}
                  container
                  direction="row"
                  alignItems="center"
                >
                  <Grid
                    item
                    container
                    direction="column"
                    justify="center"
                    alignItems="center"
                    xs={3}
                  >
                    <Avatar
                      className={classes.avatar}
                      src={singleGoal.avatar}
                    />
                    <Typography variant="caption">{singleGoal.first_name} {singleGoal.last_name}</Typography>
                    <Typography variant="caption" className={classes.postedOn}>
                      Posted on{" "}
                      <Moment format="MM/DD/YYYY">{singleGoal.date}</Moment>
                    </Typography>
                  </Grid>
                  <Grid container item direction="column" xs={9}>
                    <Typography variant="body1">
                    {singleGoal.text}
                    </Typography>
                    <Grid item className={classes.actionButtons}>
                      <ThumbUpAltIcon />
                      <ThumbDownAltIcon />
                      <ChatIcon />
                      <DoneIcon />
                      <DeleteIcon />
                    </Grid>
                  </Grid>
                </Grid>
              </Paper>
            ))}
          </Grid>
        </Container>
      </main>
    </>
  );
};

Goals.propTypes = {
  getGoals: PropTypes.func.isRequired,
  goal: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  goal: state.goal,
  auth: state.auth
});

export default connect(mapStateToProps, { getGoals })(Goals);

Answer 1

奇怪的行为是因为你将组件包装在 <Paper> 中。网格容器应填充网格项以使其按预期运行。因此删除 <Paper key={singleGoal._id}>应该会改进很多。然后，您可以使用 CSS 将内部网格项设置为白色，甚至添加 component={Paper}到它的 Prop 。

所以像这样

<Grid container spacing={4}>
  {goals.map(singleGoal => (
    <Grid
      className={classes.paper}
      spacing={1}
      container
      direction="row"
      alignItems="center"
      component={Paper}
    >
      <Grid
        item
        container
        direction="column"
        justify="center"
        alignItems="center"
        xs={3}
      >
        <Avatar className={classes.avatar} src={singleGoal.avatar} />
        <Typography variant="caption">
          {singleGoal.first_name} {singleGoal.last_name}
        </Typography>
        <Typography variant="caption" className={classes.postedOn}>
          Posted on <Moment format="MM/DD/YYYY">{singleGoal.date}</Moment>
        </Typography>
      </Grid>
      <Grid container item direction="column" xs={9}>
        <Typography variant="body1">{singleGoal.text}</Typography>
        <Grid item className={classes.actionButtons}>
          <ThumbUpAltIcon />
          <ThumbDownAltIcon />
          <ChatIcon />
          <DoneIcon />
          <DeleteIcon />
        </Grid>
      </Grid>
    </Grid>
  ))}
</Grid>;