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

IT技术 reactjs material-ui material-design next.js react-flexbox-grid
2021-04-25 08:27:49

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

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

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

在此处输入图片说明

3个回答

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

您需要添加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>

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

其它你可能感兴趣的问题
上一篇有没有人遇到过这种奇怪的印刷图案？ 下一篇筏板翘曲（Makerbot Replicator+）