如何将Material UI的IconButton移动到Tab栏的右侧边缘

原因说明 #

float: right 不生效的核心原因有两个：

• 你使用了Material UI的Grid弹性布局，flex布局下float属性本身就不会生效
• Toolbar内部多套了一层无用的div和空Fragment，导致Grid容器无法占满Toolbar的全宽，即使设置了justifyContent="space-between"也没法实现两端对齐的效果

解决方法 #

只需要做三处修改即可实现头像按钮居右的效果：

• 移除Toolbar内部包裹Grid的多余div和空<></>标签
• 给放置Tabs的Grid item添加flexGrow: 1样式，让Tabs区域占满除头像按钮外的所有剩余宽度
• 删除头像所在Grid item的float: "right"样式

修改后的核心代码如下：

export default function App() {
  const [anchorEl, setAnchorEl] = useState(null);
  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "primary-search-account-menu";
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      id={menuId}
      keepMounted
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <MenuItem>Profile</MenuItem>
      <MenuItem>Log Out</MenuItem>
    </Menu>
  );

  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <div className="App">
      <AppBar
        style={{
          position: "sticky",
          top: "0"
        }}
      >
        <Toolbar variant="dense">
          <Grid
            container
            direction="row"
            alignItems="center"
          >
            <Grid item flexGrow={1}>
              <Tabs
                centered
                value={value}
                fullWidth={true}
                indicatorColor="primary"
                onChange={handleChange}
                aria-label="simple tabs example"
                variant="fullWidth"
              >
                <Tab disableRipple label="Homepage" to="/" />
                <Tab disableRipple label="About" to="/about" />
                <Tab disableRipple label="Admin" to="/admin" />
              </Tabs>
            </Grid>
            <Grid item>
              <IconButton
                edge="end"
                aria-label="account of current user"
                aria-controls={menuId}
                aria-haspopup="true"
                onClick={handleProfileMenuOpen}
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
      {renderMenu}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者JS3