在抽屉导航器工具栏中向右移动图标

Question

我正在编辑 Material UI 的抽屉导航器示例代码。我在工具栏中添加了带有管理面板排版的通知图标和结帐图标。

结帐图标位于右端，但由于某种原因，通知图标卡在中间。我该如何解决这个问题？

抽屉.tsx：

const drawerWidth = 240;

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
    },
    appBar: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
    },
    drawerPaper: {
      width: drawerWidth,
    },

    panelheaderRight:{
        marginRight: 0,
        right: 0,
    },
    toolbar: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing(3),
    },
  }),
);

export default function PermanentDrawerLeft() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar className="toolbar-class">
          <Typography variant="h6" noWrap>
            Admin Panel
          </Typography>
          <NotificationsIcon className='panelheaderRight'/>
          <ExitToAppIcon className='panelheaderRight'/>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >
        <div className='toolbar'/>
        <Divider />
        <List>
        {[{ text: 'Home', url: '/panel', icon: <HomeIcon/>}].map((item, index) => (
            <Link to={item.url} style={{ textDecoration: 'none' }}>
            <ListItem button key={item.text}>
              <ListItemIcon>{item.icon}</ListItemIcon>
              <ListItemText primary={item.text} />
            </ListItem>
            </Link>
          ))}
        </List>
        <Divider />   
      </Drawer>
    </div>
  );
}

我也单独添加了这个 css 代码，但它不起作用。 抽屉.css：

.panelheaderRight{
    margin-right: 0;
    float: right;
    right: 0;
}
.toolbar-class{
    display:flex;
    justify-content:space-between;
    width: 100%;
    }

Answer 1

这是因为你需要一个额外的包装器；看这个：

.toolbar-class {
  display: flex;
  align-items:center;
  justify-content: space-between;
  background-color: #ddd;
  padding: 0 1rem;
}

.toolbar-after {
  display: flex;
  align-items: center;
}

.item:not(:last-child) {
  margin-right: 15px;
}

<div class="toolbar-class">
  <div>Admin panel</div>
  <div class="toolbar-after">
    <p class="item">bell</p>
    <p class="item">exit</p>
  </div>
</div>

如果你不想要额外的包装器，你可以使用 css 网格

.toolbar-class {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  background-color: #ddd;
  padding: 0 1rem;
}

.item:not(:last-child) {
  margin-right: 15px;
}

<div class="toolbar-class">
  <div>Admin panel</div>
    <p class="item">bell</p>
    <p class="item">exit</p>
</div>

Answer 2

将以下css添加到工具栏

.toolbar-class{
display:flex;
justify-content:space-between;
}