如何使用material-ui-next中的material-ui appbar正确地向右或向左浮动？

Question

我无法确定在使用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>

- Kyle Pennell

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

- Idan Dagan

---

justify="space-between" // 在这里添加 :) container spacing={24} 这三行代码对我很有帮助，谢谢。 - Rajkumar M

Answer 2

您需要在<Typography />组件中添加flex: 1属性，以便将<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>

- Jaye Renzo Montejo

---

这让我陷入了一个Flexbox的兔子洞。我还不太明白它是如何工作的，但我应该能够弄清楚。 - Kyle Pennell

我已经想出了解决方案。“Flex: 1” 意味着 “flex-grow: 1”，这意味着 Typography 元素应该接收所有已用的空间，这将把图标等内容推向右侧。 - Iteria

我还要补充一点，如果想要将 <Typography /> 组件右对齐，除了给它添加 flexGrow: 1 样式之外，还应该在其属性中添加 align: "right"，就像 API 中所示的那样。应用栏演示 目前只演示了右对齐的图标，而不是文本。 - Felipe Maia

不要忘记在容器中添加 display:'flex'。 - YouneL

是的，尽管 <ToolBar /> 已经是 flex，但 <AppBar /> 也是。 - Valen

Answer 3

<Toolbar>
  <Box sx={{ flexGrow: 1 }}>
    <Button variant='text' color='inherit'>Button1</Button>
    <Button variant='text' color='inherit'>Button2</Button>
    <Button variant='text' color='inherit'>Button3</Button>
  </Box>
  <Button variant='text' color='inherit'>Button4</Button>
</Toolbar>

现在，Button4将位于最右边！

- Joseph

Answer 4

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

- Mosta

---

根据您提供的文档，使用align属性将“在组件上设置文本对齐方式”。我认为这会设置按钮内部按钮文本的对齐方式，而这不是OP所要求的。 - devklick

Answer 5

新变量：

<Grid
  container
  direction="row"
  justifyContent="space-between"
  alignItems="center"
>
    <Grid item>Back</Grid>
    <Grid item>Next</Grid>
</Grid>

- Serhii Zelenchuk