使用 Material-UI 的 Grid 組件，如何讓一個單元格占據剩余的水平寬度？

Question

我正在嘗試在我的 React 16.13.0 應用程序中使用 material-ui 的 Grid 組件。 我想要一行包含三個項目。 前兩項應該只占用他們需要的空間（如果可能的話，我不想硬編碼像素值）。 我希望第三個項目占據剩余的水平空間並最遠地浮動到 rigth （雖然我發現 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>

但不幸的是，這使得一切都聚集在一起

如何調整 styles 來做我想做的事？

編輯：這是根據@Mohsen007 給出的答案顯示的內容...

Answer 1

按照下面的代碼：

rowBody: {
    width: "100%",
    flexWrap: "nowrap",
    alignItems: "center",
    display: "flex",
},

<Grid container className={classes.rowBody}>
     <Grid item>
         <img height="20" src={require('../../img/apple.svg')} alt="" />
     </Grid>
     <Grid item style={{flex: 1,}}>
         {title}
     </Grid>
     <Grid item>
         <InfoIcon />
     </Grid>
</Grid>