Question

我正在寻找有关此布局的一些建议。我正在努力使带有边框的播放按钮处于中间。到目前为止，我有以下代码，我只是在努力让flexbox定位播放按钮。

    function Tasks(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
              <div className="name-label">
              Name
              </div>
              <Typography variant="h6" gutterBottom>
              Order cofee beans
              </Typography>
              <div className="form-divider"></div>
                <Typography variant="body2" color="textSecondary">
                  Process of Description
                </Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography variant="subtitle">Workers Assigned</Typography>
              <Grid item xs={3}>
        <i class="far fa-play-circle"></i>
      </Grid>
              <Typography variant="h6" gutterBottom>
              0/25</Typography>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

当前，我不确定是否是网格问题，或者我是否需要更好地构建自己拥有的内容，所以我们将不胜感激。我对它的外观有一个印象：

Image

Answer 1

我不会使用flex这样放置按钮。看来您想要类似的东西：

const styles = theme => ({
  box1: {
    display: "flex",
    position: "relative",
    "& .playButton": {
      position: "absolute",
      top: "50%",
      transform: "translateY(-50%)"
    }
  }
});

const YourComponent = props => (
  <div>
    {...}
    <Grid item classes={{ root: props.classes.box1}}>
      <Typography variant="subtitle">Workers Assigned</Typography>
      <Grid item xs={3} className="playButton">
        <i class="far fa-play-circle"></i>
      </Grid>
      <Typography variant="h6" gutterBottom>0/25</Typography>
    </Grid>
    {...}
  </div>
);

YourComponent = withStyles(styles)(YourComponent);

如何使用Material UI和Flexbox居中播放按钮

1 个答案: