Почему My Space становится новой линией, использующей сетку Material UI Grid System?

Мне труднее всего работать с системой сетки Material UI. Я пытаюсь сделать что-то относительно простое: держать Icon + Text слева от контейнера и нажимать кнопку справа. Однако я обнаружил, что любой мой текст, в котором есть два слова с пробелом, становится двумя строками, и я понятия не имею, почему это происходит и что с этим делать.

Настройка фрагмента реакции

<>
  <Grid className={classes.rowLayout} display="inline">
    <SomeIcon />
    <Typography variant="h4" gutterBottom>&nbsp;Title Text</Typography>
    <Grid container justify="flex-end">
      <Button />
    </Grid>
  </Grid>
</>

JSS-класс rowLayout

...
rowLayout: {
  display: 'flex',
  alignItems: 'baseline',
}
...

Как это выглядит сейчас

Текст с пробелом неправильно переносится

Любые идеи?

Огромное спасибо,

Дэвис


reactjs material-ui flexbox jss
person Davis Jones    schedule 30.03.2020    source источник
comment
Достаточно ли места для текста (width = ?) и почему бы не выровнять содержимое рядом с display:flex?   -  person emsiiggy    schedule 31.03.2020
comment
Не могли бы вы предоставить онлайн-демонстрацию? Или полный код?   -  person keikai    schedule 31.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

Все, что вы хотите вести себя как элемент в material-ui, должно быть заключено в элемент Grid. И элементы в контейнере Grid, как показано в примерах здесь. Структура должна быть примерно такой (относительно контейнера/предметов). Если у вас достаточно места, как на изображении, которое вы разместили, текст не должен разрывать строку перед кнопкой.

<Grid container>
    <Grid item>
      <div style={{ display: "flex", flexDirection: "row" }}>
        <EditIcon />
        <Typography variant="h4" gutterBottom>
          Title Text
        </Typography>
      </div>
    </Grid>
    <Grid item>
      <Button>button </Button>
    </Grid>
</Grid>

Если вы не хотите, чтобы текстовая строка каким-либо образом прерывалась, вы можете проверить, как это сделать здесь.

person Craftmoon    schedule 05.03.2021