Material UI Accordion组件引发导航栏样式覆盖异常

你的项目存在MUI大版本混用的致命问题：

• 侧边栏、导航栏的基础组件（Box/Drawer/AppBar/Toolbar等）是从 @mui/material（MUI v5版本）导入
• Tabs、Tab、Accordion系列组件、以及Accordion内的Typography组件是从 @material-ui/core（MUI v4版本）导入

两个大版本的类名生成规则、主题上下文、全局样式注入逻辑完全不兼容，v4组件加载时会注入自带的默认全局样式，直接覆盖v5主题配置的导航栏颜色变量，同时v4 Tabs组件的垂直布局样式优先级被冲突的全局样式打乱，才会出现你遇到的两个异常。

• 统一所有MUI组件的导入来源，全部使用v5版本的@mui/material，彻底移除v4版本@material-ui/core的依赖
  1. 替换侧边栏文件内的Tabs相关导入：

  // 删除旧的v4导入
  // import Tabs from '@material-ui/core/Tabs';
  // import Tab from '@material-ui/core/Tab';
  // 替换为v5导入
  import Tabs from '@mui/material/Tabs';
  import Tab from '@mui/material/Tab';
  

  2. 替换Accordion组件文件内的所有v4导入：

  // 删除旧的v4导入
  // import Accordion from '@material-ui/core/Accordion';
  // import AccordionSummary from '@material-ui/core/AccordionSummary';
  // import AccordionDetails from '@material-ui/core/AccordionDetails';
  // import Typography from '@material-ui/core/Typography';
  // 替换为v5导入
  import Accordion from '@mui/material/Accordion';
  import AccordionSummary from '@mui/material/AccordionSummary';
  import AccordionDetails from '@mui/material/AccordionDetails';
  import Typography from '@mui/material/Typography';
  

• 修复侧边栏内Tabs的布局层级问题：你当前把<Tabs>组件嵌套在<Toolbar>组件内部，Toolbar自带的flex布局规则会强制子元素横向排列，覆盖Tabs的orientation="vertical"配置，把Divider和Tabs移出Toolbar节点即可，调整后的drawer结构参考：

const drawer = (
    <div>
        <Toolbar sx={{ pt: 10 }} />
        <Divider />
        <Tabs 
            orientation="vertical" 
            variant="scrollable" 
            value={value} 
            onChange={handleChange} 
            aria-label="simple tabs"
            sx={{ borderRight: 1, borderColor: 'divider' }}
        >
            <Tab label="Freshman" {...a11yProps(0)} />
            <Tab label="Sophomore" {...a11yProps(1)} />
            <Tab label="Junior" {...a11yProps(2)} />
            <Tab label="Senior" {...a11yProps(3)} />
        </Tabs>
    </div>
);

• 清理依赖：执行npm uninstall @material-ui/core或者yarn remove @material-ui/core彻底移除v4版本包，避免后续打包时重复引入冲突样式。

修改完成后重启开发服务：

• 导航栏主色恢复为主题配置的primary色，不会再被全局样式覆盖
• 侧边栏Tabs恢复垂直排列，不会出现横向错位
• Accordion组件展开/收起样式完全正常，不会再影响全局其他组件样式

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