使用Material-UI的Grid组件，如何使一个像元占据剩余的水平宽度？

Question

我正在尝试在我的React 16.13.0应用程序中使用material-ui的Grid组件。我想连续三列。前两个项目仅应占用所需的空间（如果可能，我不想对像素值进行硬编码）。我希望第三个项目占用剩余的水平空间，并将最远的浮动到浮标上（我发现React不喜欢将“ float：right”作为样式）。我有这个

const styles = (theme) => ({
  root: {
    textAlign: "left",
    margin: theme.spacing(2),
    paddingBottom: theme.spacing(1),
    color: theme.color.secondary,
  },
  cardHeader: {
    paddingBottom: theme.spacing(0),
  },
  cardContent: {
    width: "100%",
    paddingBottom: theme.spacing(1),
  },
  rowBody: {
    width: "100%",
    flexWrap: "nowrap",
    alignItems: "center",
  },
});
...
      <CardContent className={classes.cardContent}>
        <Grid container className={classes.rowBody}>
          <Grid item>
            <img height="20" src={require('../../img/apple.svg')} alt="" />
          </Grid>
          <Grid item>
            {title}
          </Grid>
          <Grid item>
            <InfoIcon />
          </Grid>
        </Grid>

但是不幸的是，这使所有内容都聚集在一起

如何调整样式以完成我想要的事情？

Answer 1

如果要将这些项目放在一行中，则需要执行类似的操作

<Grid
  container
  direction="row"
  justify="flex-start"
  alignItems="center"
>
 <Grid item>
            <img height="20" src={require('../../img/apple.svg')} alt="" />
          </Grid>
          <Grid item>
            {title}
          </Grid>
          <Grid item>
            <InfoIcon />
          </Grid>
</Grid>

您还可以在每个项目应占用的列中设置空间，这非常简单，请查阅文档。 https://material-ui.com/components/grid/