AppBar中的右侧和左侧对齐图标,其次是material-ui

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>

Answer 1

我知道你问这个问题已经有一段时间了，我想提供一个替代解决方案。在左侧的组件周围添加 Box 标签（类似于 CSS 中的 flexbox）并调整flexGrow属性，它对我有用：

import Box from '@material-ui/core/Box';

{/* BEFORE APPBAR*/}

<AppBar>
    <Toolbar>
        <Box display='flex' flexGrow={1}>
            {/* whatever is on the left side */}
        </Box>
        {/* whatever is on the right side */}
    </Toolbar>
</AppBar>

{/* AFTER APPBAR*/}

Answer 2

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

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

要么

使用margin-left: auto对齐按钮的第二组到柔性容器的右边.

这是一个实例

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

Answer 3

我尝试在 Toolbar 组件本身中使用内联 css，它对我有用； <Toolbar style={{display:'flex', justifyContent:"space-between", width:'100%'}}>