Material-UI Accordion(以前称为 ExpandTable)组件无法导入

Question

我正在使用Material-UI构建一个应用程序，到目前为止一切顺利。 我正在尝试使用Accordion组件构建组件，但在尝试导入它时出现错误：

Module not found: Can't resolve '@material-ui/core/Accordion' in [path]

我尝试通过默认导入和命名导入它，但结果是相同的。

该组件：

import React from 'react';
//  import {
//     Accordion,
//     AccordionSummary,
//     AccordionDetails
//  } from '@material-ui/core';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

const JobCard = () => {
return(
<Accordion expanded={true}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
>
test
</AccordionSummary>
<AccordionDetails>
test
</AccordionDetails>
</Accordion>
);
}
export default JobCard;

我的所有其他组件都可以与导入的材料 UI 组件正常工作。

我在这里错过了我做错了什么吗？有人遇到过这样的问题吗？

Answer 1

ExpandPanel 已重命名为 Accordion 。由于您的错误，您似乎使用的是4.10.2(或更低(的材料 ui 核心版本。

使用 材料 UI 核心版本4.11.0或更高版本。

代码沙箱中代码的工作演示

Answer 2

安装材质 UI 核心

npm i @material-ui/core

所以，这将是@material-ui/core@4.11.0

然后，它的工作。玩得愉快！！

Answer 3

我遇到了基本相同的问题。错误是：

"无法解析'@material-ui/图标/展开更多'">

安装以下内容后：

"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"avatar": "^0.1.0",
"clsx": "^1.1.1",
"jquery": "^3.5.1",
"material-ui": "^0.20.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-ga": "^2.7.0",
"react-scripts": "1.0.17"

我跑npm update，一切都很好

:)

Answer 4

Accordion的名称最近改成了ExpansionPanel，所以像这样导入：

import Accordion from '@material-ui/core/ExpansionPanel';
import AccordionSummary from '@material-ui/core/ExpansionPanelSummary';
import AccordionDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

Answer 5

Material-UI Accordion(以前称为 ExpandTable(组件不会导入，因为它已被重命名，因此它的更新问题，因此要更新文件夹中的材料 UI 和其他包，请运行命令

npm outdated

将列出过时的依赖项

NPM 更新

或

npm update  "react" "react-dom"

要更新特定软件包，然后运行以下命令以安装特定软件包

npm install react@latest react-dom@latest

或

npm install

安装所有软件包