如何让React MUI导航栏中的头像图标按钮固定在右侧角落

核心问题是MUI的sx属性仅对MUI官方组件生效，你给原生<a>标签加的flexGrow: 1没有实际生效，导致左侧标题区域没有自动撑开剩余空间，头像就一直挤在左侧。

你可以任选下面一种方法修改：

• 方法1：把原生a标签替换为MUI的Link组件，让sx属性正常生效
• 方法2：给原生a标签直接加内联样式，或者外层套一层MUI的Box组件设置flexGrow: 1

下面是修改后的完整代码（以方法1为例）：

// 需提前导入MUI的Link组件
import Link from '@mui/material/Link';

export default function MenuAppBar() {
    const [auth, setAuth] = React.useState(true);
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleChange = (event) => {
        setAuth(event.target.checked);
    };

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

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

    return (
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton
                        size="large"
                        edge="start"
                        color="inherit"
                        aria-label="menu"
                        onClick={handleMenu}
                        sx={{ mr: 2 }}
                    >
                        <MenuIcon />
                        <Menu
                            id="menu-appbar"
                            anchorEl={anchorEl}
                            anchorOrigin={{
                                vertical: 'top',
                                horizontal: 'right',
                            }}
                            keepMounted
                            transformOrigin={{
                                vertical: 'top',
                                horizontal: 'right',
                            }}
                            open={Boolean(anchorEl)}
                            onClose={handleClose}
                        >
                            <MenuItem onClick={handleClose}>Profile</MenuItem>
                            <MenuItem onClick={handleClose}>My account</MenuItem>
                        </Menu>
                    </IconButton>
                    {/* 替换为Link组件，sx属性生效后会自动撑开剩余空间，把头像挤到右侧 */}
                    <Link className="navbar-brand" href="/home" sx={{ flexGrow: 1, color: 'inherit', textDecoration: 'none' }}>
                    Bookeroo
                    </Link>
                    {auth && (
                        <div>
                            <IconButton
                                size="large"
                                aria-label="account of current user"
                                aria-controls="menu-appbar"
                                aria-haspopup="true"
                                onClick={handleMenu}
                                color="inherit"
                            >
                                <AccountCircle />
                            </IconButton>
                            <Menu
                                id="menu-appbar"
                                anchorEl={anchorEl}
                                anchorOrigin={{
                                    vertical: 'top',
                                    horizontal: 'right',
                                }}
                                keepMounted
                                transformOrigin={{
                                    vertical: 'top',
                                    horizontal: 'right',
                                }}
                                open={Boolean(anchorEl)}
                                onClose={handleClose}
                            >
                                <MenuItem onClick={handleClose}>Profile</MenuItem>
                                <MenuItem onClick={handleClose}>My account</MenuItem>
                            </Menu>
                        </div>
                    )}
                </Toolbar>
            </AppBar>
        </Box>
    );
}

如果不想额外引入MUI的Link组件，直接给原生a标签加内联样式也能实现同样效果：

<a className="navbar-brand" href="/home" style={{ flexGrow: 1, color: 'inherit', textDecoration: 'none' }}>
Bookeroo
</a>

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