AppBar中左右对齐的图标都带有material-ui next

Question

如果我有一个 AppBar ，我怎样才能使一组图标加上徽标在左侧，而另一组图标在它的右侧？

前任：

• 左：（从左到右）1个菜单图标，标志
• 右：（从右到左）1个菜单图标、1个保存图标、1个编辑图标

AppBar 组件：

 <AppBar
            className={classNames(classes.appBar, {
                [classes.appBarShift]: open,
                [classes[`appBarShift-left`]]: open,
                [classes[`appBarShift-right`]]: !tools,
            })}
            position='static'
        >
            <Toolbar className={classNames(classes.topBar)}>
                <IconButton
                    color="inherit"
                    aria-label="open drawer"
                    onClick={this.handleDrawerToggle}
                    className={classNames(classes.menuButton)}
                >
                    <MenuIcon />
                </IconButton>
                <Typography variant="title" color="inherit" noWrap>React App</Typography>
                <IconButton
                    color="inherit"
                    aria-label="open tool drawer"
                    onClick={this.handleToolDrawerToggle}
                    className={classNames(classes.menuButton)}
                >
                    <MenuIcon />
                </IconButton>
            </Toolbar>
        </AppBar>

原文由 cclloyd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 flexbox 来控制工具栏中元素的对齐方式…

一种选择是将 flex: 1 添加到徽标元素。它将扩展以填充容器中的可用空间。 logo 之后的所有元素都将右对齐。

要么

使用 margin-left: auto 将第二组按钮对齐到 flex 容器的右侧。

这是一个活生生的例子

const styles = {
  // this group of buttons will be aligned to the right side
  toolbarButtons: {
    marginLeft: 'auto',
  },
};

const Demo = ({ classes }) => (
  <AppBar position="static">
    <Toolbar>
      <IconButton color="inherit">
        <MenuIcon />
      </IconButton>
      <Typography variant="title" color="inherit">Title</Typography>
      <div className={classes.toolbarButtons}>
        <IconButton color="inherit"><EditIcon /></IconButton>
        <IconButton color="inherit"><SaveIcon /></IconButton>
        <IconButton color="inherit"><MoreVertIcon /></IconButton>
      </div>
    </Toolbar>
  </AppBar>
);

原文由 Luke Peavey 发布，翻译遵循 CC BY-SA 4.0 许可协议