如何在Material UI的Persistent Drawer切换菜单区域添加文本？

完全可行，你可以通过自定义Persistent Drawer的工具栏（Toolbar）区域，将切换按钮与文本元素组合布局来实现需求。以下是具体的实现示例（基于Material UI v5）：

import * as React from 'react';
import { Drawer, IconButton, Toolbar, Typography, Box } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';

export default function PersistentDrawerLeft() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <Box sx={{ display: 'flex' }}>
      {/* 自定义Toolbar，包含切换按钮和文本 */}
      <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={toggleDrawer}
            edge="start"
            sx={{ mr: 2, ...(open && { display: 'none' }) }}
          >
            <MenuIcon />
          </IconButton>
          {/* 添加的文本 */}
          <Typography variant="h6" noWrap component="div">
            侧边栏切换
          </Typography>
        </Box>
      </Toolbar>

      <Drawer
        variant="persistent"
        anchor="left"
        open={open}
        sx={{
          width: 240,
          flexShrink: 0,
          '& .MuiDrawer-paper': { width: 240, boxSizing: 'border-box' },
        }}
      >
        <Toolbar />
        {/* 抽屉内容 */}
        <Box sx={{ p: 2 }}>
          <Typography>抽屉内容区域</Typography>
        </Box>
      </Drawer>
    </Box>
  );
}

关键实现要点： #

• 将切换按钮（IconButton）和文本（Typography）包裹在同一个Box容器中，通过display: flex和alignItems: center实现垂直对齐，gap控制元素间距
• 利用Drawer的variant="persistent"特性，保持工具栏区域的布局稳定性
• 可根据需求调整文本的样式（字体大小、颜色等）和按钮的显示逻辑

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