Reactjs 什么'；下一步使用material ui appbar和material ui向右或向左浮动的正确方法是什么？

我不知道我是否使用了正确的方法，在使用material ui next（“material ui”：“^1.0.0-beta.22”时，让登录/注销按钮直接进入

似乎他们从api中删除了

iconElementRight=

。我们现在是否必须使用appbar中的

？感觉有点笨拙。在appbar中浮动按钮（例如登录）的正确方式是什么

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

---

您需要将
flex:1
添加到
组件中，以便它将
推到应用程序栏的最右侧：

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


标题
登录
@Kyle你说得对：）

只需添加到网格容器：

justify=“间距”

以你的例子：

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


标题
登录
这让我陷入了flexbox兔子洞。我仍然不太明白它是如何工作的，但我应该能够找到它。我找到了这个解决方案。“Flex:1”表示“Flex grow:1”，这意味着排版元素应该接收所有使用的空间，将图标等推到右侧。我还想补充一点，如果想要右对齐
组件，除了给它
flexGrow:1
样式外，还应该添加
align:“right”
到其道具，如中所示。目前只演示右对齐的图标，而不是文本。不要忘记在容器中添加
显示：'flex'
，虽然
本身已经是
flex
了，
toojustify=“space between”//add it here:）容器间距={24}这三行代码帮助了我，谢谢。