Используя компонент Grid Material-UI, как мне заставить одну ячейку занять оставшуюся горизонтальную ширину? - PullRequest
Новая
       25

Используя компонент Grid Material-UI, как мне заставить одну ячейку занять оставшуюся горизонтальную ширину?

0 голосов
/ 03 мая 2020

Я пытаюсь использовать компонент Grid material-ui в своем приложении React 16.13.0. Я хочу иметь ряд с тремя предметами. Первые два элемента должны занимать столько места, сколько им нужно (я не хочу жестко кодировать значения пикселей, если это возможно). Мне бы хотелось, чтобы третий элемент занимал оставшееся горизонтальное пространство и перемещался дальше всего к правой части (хотя я обнаружил, что 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>

Но, к сожалению, это отдает все в кучу вместе

enter image description here

Как настроить стили, чтобы сделать что я хочу?

Редактировать: Это то, что отображается на основе ответа, данного @ Mohsen007 ...

enter image description here

1 Ответ

0 голосов
/ 03 мая 2020

Следуйте приведенному ниже коду: 

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