Как иметь одинаковую ширину в материале - PullRequest
Новая
       9

Как иметь одинаковую ширину в материале

3 голосов
/ 15 января 2020

У меня есть два компонента цели, и я не знаю, почему их ширина ведет себя таким образом

enter image description here

Я попытался установить Ширина селектора бумаги до 100%, но это не влияет на каждый компонент цели. Как я могу оперативно установить одинаковую ширину с каждой стороны этого компонента цели? Что-то вроде этого ... с черным прямоугольником, представляющим веб-страницу, и красными прямоугольниками, представляющими компоненты цели

enter image description here

Текущий код приведен ниже для справки: 

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

1 Ответ

0 голосов
/ 15 января 2020

Странное поведение в том, что вы заключаете свой компонент в <Paper>. Контейнер Grid должен быть заполнен элементами Grid, чтобы он вел себя так, как ожидалось. Таким образом, удаление <Paper key={singleGoal._id}> должно значительно улучшить его. Затем вы можете использовать CSS, чтобы сделать внутренний элемент сетки белым или даже добавить component={Paper} к его подпоркам.

Так что-то вроде этого 

<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>;
...