如何在React项目中通过Material UI添加Accordion？遇模块缺失错误

问题分析 #

你面临两个核心问题：

1. 浏览器抛出Module not found: Can't resolve '@mui/icons-material/ExpandMore'错误，根源是项目缺少Material UI图标包依赖
2. Accordion展开功能失效，主要是因为上述模块缺失导致组件无法正常渲染

解决方案 #

1. 安装缺失的图标依赖 #

在项目根目录执行以下命令，安装@mui/icons-material包：

npm install @mui/icons-material
# 若使用yarn则执行
yarn add @mui/icons-material

2. 确保Material UI核心依赖完整（可选） #

如果之前仅安装了部分Material UI组件，建议补充完整依赖以避免其他潜在问题：

npm install @mui/material @emotion/react @emotion/styled

验证说明 #

你的About.js代码逻辑本身没有问题，安装上述依赖后，组件即可正常渲染，Accordion的展开功能也会恢复正常。

修正后可直接运行的代码如下：

import { useContext } from "react";
import { Cont } from "../Cont";
import "./stylingfolder/Intro.css";

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

function About(){
    const {user}=useContext(Cont)
    return(
        <>
        <h1 className="welcome">Welcome {user.name} 🗽</h1>
        <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography>Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3a-content"
          id="panel3a-header"
        >
          <Typography>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
        </>
    )
}
export default About;

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