为什么我的 Space 成为使用 Material UI 网格系统的新行？

Question

我在使用 Material UI 网格系统时遇到了最困难的时期。我试图实现一些相对简单的事情——将图标 + 文本保持在容器的左侧，然后将按钮推到右侧。但是，我发现我的任何包含两个带有 space 的单词的文本都会变成两行，而且我不知道为什么会这样，也不知道该怎么办。

设置 React 片段

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

rowLayout JSS Class

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

现在的样子

有什么想法吗？

非常感谢，

戴维斯

Answer 1

您希望表现得像 material-ui 中的项目的所有内容都应包含在网格项目中。以及 Grid 容器中的项目，如示例 here 中所示。结构应该是这样的（关于 container/items）。如果您有足够的 space 就像您发布的图片一样，文本不应在按钮前换行。

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

如果您不希望文本行以任何方式中断，您可以查看如何做到这一点。

为什么我的 Space 成为使用 Material UI 网格系统的新行？

Why is My Space Becoming a New Line using the Material UI Grid System?

flexbox

reactjs

material-ui

jss

设置 React 片段

rowLayout JSS Class

现在的样子