javascript - 材质 UI 列表组件不显示
问题描述
我想在移动视图的下拉菜单(Material UI 抽屉组件)中显示一个 Material UI 列表,但由于某种原因,实际列表没有显示。
列表的代码如下所示:
const menuItems = [
{
text: 'Home',
path: '/'
},
{
text: 'About',
path: '/about'
}
];
...
<List>
{menuItems.map(item => (
<ListItem
button
key={item.text}
onClick={() => history.push(item.path)}
>
<ListItemText>{item.text}</ListItemText>
</ListItem>
))}
</List>
这是应该显示我的列表项的结果,但我得到了这个奇怪的图标:
这是我的 package.json 文件:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.1",
"@material-ui/icons": "^4.11.2",
"@material-ui/styles": "^4.11.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"firebase": "^8.7.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-timeago": "^6.2.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
--
编辑:
这是一个有效的 CodeSandbox 示例
解决方案
错误在导入中。
正确的:
import List from "@material-ui/core/List";
推荐阅读
- android - 将 Android Studio 从 3.6.2 迁移到 4.3.1 后,我的布局文件夹出现红线
- python - Nuitka 无法使用包含表情符号的文件名进行编译
- javascript - Next.js 使用 getStaticPaths 捕获所有未按预期工作的路线
- android - Android Button 以图形布局显示但不在设备上(这不是重复的)
- javascript - 在反应中使用一条线连接两个 div 元素
- python - 填充队列的 Python 线程永远不会执行
- rust - 如何简单地将 &dyn 特征转换为使用?
- python - 通过逻辑应用程序上的功能部署 AZURE 自定义标签表单模型
- javascript - 为什么 d3.arc() 给我函数而不是路径字符串?
- mysql - 在 Linux 服务器上完全通过命令行而不是通过 phpMyAdmin 使用 MySQL 时,如何查找和设置 localhost、用户和密码?