如何在MUI React Drawer组件中添加图标、组织名与搜索框？

完全可以在MUI的Drawer中添加Logo、组织名称和搜索框，以下是修改后的完整代码，已经帮你实现了目标效果：

import React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import BusinessIcon from '@mui/icons-material/Business'; // 可替换为你的自定义Logo图标
import { ThemeProvider } from '@mui/material/styles';
import muiTheme from '../../../.storybook/muiTheme';
import PropTypes from 'prop-types';

type Anchor = 'top' | 'left' | 'bottom' | 'right';

export const Drawers = ({ }) => {
    const [state, setState] = React.useState({
        top: false,
        left: false,
        bottom: false,
        right: false,
    });

    const toggleDrawer = (anchor, open) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    const list = (anchor) => (
        <Box sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}>
            {/* Logo和组织名称区域 */}
            <Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
                <BusinessIcon sx={{ fontSize: 32 }} />
                <Typography variant="h6" fontWeight="bold">
                    组织名称
                </Typography>
            </Box>

            {/* 搜索框 */}
            <Box sx={{ p: 2 }}>
                <TextField
                    fullWidth
                    placeholder="搜索..."
                    size="small"
                    variant="outlined"
                />
            </Box>

            <Divider />

            {/* 菜单列表区域，点击此处才关闭Drawer */}
            <Box
                role="presentation"
                onClick={toggleDrawer(anchor, false)}
                onKeyDown={toggleDrawer(anchor, false)}
            >
                <List>
                    {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
                        <ListItem key={text} disablePadding>
                            <ListItemButton>
                                <ListItemIcon>
                                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                                </ListItemIcon>
                                <ListItemText primary={text} />
                            </ListItemButton>
                        </ListItem>
                    ))}
                </List>
                <Divider />
                <List>
                    {['All mail', 'Trash', 'Spam'].map((text, index) => (
                        <ListItem key={text} disablePadding>
                            <ListItemButton>
                                <ListItemIcon>
                                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                                </ListItemIcon>
                                <ListItemText primary={text} />
                            </ListItemButton>
                        </ListItem>
                    ))}
                </List>
            </Box>
        </Box>
    );

    return (
        <div>
            {['left'].map((anchor) => (
                <React.Fragment key={anchor}>
                    <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
                    <Drawer
                        anchor={anchor}
                        open={state[anchor]}
                        onClose={toggleDrawer(anchor, false)}
                    >
                        {list(anchor)}
                    </Drawer>
                </React.Fragment>
            ))}
        </div>
    );
}

export const Temporary = Drawers.bind({});

关键修改说明： #

• 新增组件导入：添加了TextField（搜索框）、Typography（组织名称文本）和BusinessIcon（可替换为你的自定义Logo）。
• 顶部布局：用Box容器通过flex布局排列Logo和组织名称，设置内边距保证视觉间距。
• 搜索框适配：设置fullWidth让搜索框占满Drawer宽度，size="small"适配侧边栏紧凑尺寸。
• 事件优化：将关闭Drawer的事件从最外层容器移到菜单列表区域，避免点击Logo或搜索框时意外关闭Drawer。
• 结构分隔：用Divider区分不同功能区域，让Drawer层级更清晰。

你可以根据需求替换BusinessIcon为自己的Logo图标，修改组织名称文本，或给搜索框添加实际的搜索逻辑。

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