reactjs - AppBar 中的图标右对齐和左对齐，接下来是 Material-ui

Question

如果我有一个AppBar，我怎样才能使一组图标加 Logo 位于左侧，另一组图标位于其右侧？

例如:

• 左:(从左到右)1 个菜单图标、 Logo
• 右:(从右到左)1 个菜单图标、1 个保存图标、1 个编辑图标

应用栏组件:

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

Answer 1

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

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

或者

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

Here is a live example

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