使用带有material-ui-next的material-ui appbar向右或向左浮动的正确方法是什么？答案

【问题标题】：What's the right way to float right or left using the material-ui appbar with material-ui-next?使用带有material-ui-next的material-ui appbar向右或向左浮动的正确方法是什么？
【发布时间】：2018-05-21 01:15:33
【问题描述】：

在使用 material-ui-next ("material-ui": "^1.0.0-beta. 22",)

他们似乎从 api 中删除了 iconElementRight=。我们现在必须在应用栏中使用<Grid> 吗？感觉有点笨拙。在应用栏中浮动按钮（例如登录）的正确方法是什么？

<AppBar position="static">
      <Toolbar>
        <Grid container spacing={24}>
          <Grid item xs={11}>
            <Typography type="title" color="inherit">
              Title
            </Typography>
          </Grid>

          <Grid item xs={1}>
            <div>
              <HeartIcon />
              <Button raised color="accent">
                Login
              </Button>
            </div>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>

【问题讨论】：

标签： reactjs material-ui material-design next.js react-flexbox-grid

【解决方案1】：

@Kyle 你说得对:)

只需添加到网格容器中：

justify="space-between"

用你的例子：

<AppBar position="static">
  <Toolbar>
    <Grid
      justify="space-between" // Add it here :)
      container 
      spacing={24}
    >
      <Grid item>
        <Typography type="title" color="inherit">
          Title
        </Typography>
      </Grid>

      <Grid item>
        <div>
          <HeartIcon />
          <Button raised color="accent">
            Login
          </Button>
        </div>
      </Grid>
    </Grid>
  </Toolbar>
</AppBar>

【讨论】：

justify="space-between" // 在此处添加 :) container spacing={24} 这三行对我有帮助，谢谢。

【解决方案2】：

您需要将flex: 1 添加到您的<Typography /> 组件中，以便将<div /> 推送到AppBar 的最右侧：

<AppBar position="static">
  <Toolbar>
    <Typography type="title" color="inherit" style={{ flex: 1 }}>
      Title
    </Typography>
    <div>
      <HeartIcon />
      <Button raised color="accent">
        Login
      </Button>
    </div>
  </Toolbar>
</AppBar>

【讨论】：

这让我陷入了 flexbox 兔子洞。我仍然不太明白这是如何工作的，但我应该能够弄清楚
我想出了这个解决方案。 "Flex: 1" 表示 "flex-grow: 1" 这意味着 Typography 元素应该接收所有使用的空间，将图标等推到右侧。
我还要补充一点，如果想要右对齐<Typography /> 组件，除了给它flexGrow: 1 样式之外，还应该添加@987654329 @ 到它的道具，如 the API 所示。 The App Bar demo 目前只演示右对齐图标，不演示文本。
不要忘记在容器中添加display:'flex'
是的，虽然<ToolBar /> 本身已经是flex，但<AppBar /> 也是

【解决方案3】：

只需使用属性 align="right" 如此处所示https://mui.com/api/typography/

【讨论】：