如何在 CoreUI React 中正确使用 MaterialUI 图标答案

【问题标题】：How to properly use MaterialUI icons in CoreUI React如何在 CoreUI React 中正确使用 MaterialUI 图标
【发布时间】：2022-10-23 20:08:42
【问题描述】：

我需要在 CoreUI 的 React 仪表板模板中使用 Material UI 图标，为此，我安装了 @mui/material 和 @mui/icons-material ：

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

和

npm install @mui/icons-material

这是我的包.json现在：

"dependencies": {
    "@coreui/chartjs": "^3.0.0",
    "@coreui/coreui": "^4.2.1",
    "@coreui/icons": "^2.1.0",
    "@coreui/icons-react": "^2.1.0",
    "@coreui/react": "^4.4.0",
    "@coreui/react-chartjs": "^2.1.0",
    "@coreui/utils": "^1.3.1",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.6",
    "@mui/material": "^5.10.6"
//...
}

然后在src/_nav.js 文件中，我应该在哪里导入图标并使用它。所以我在下面尝试了这段代码：

import React from 'react'
import CIcon from '@coreui/icons-react'
import { CNavItem } from '@coreui/react'
import PeopleIcon from '@mui/icons-material/People'

const _nav = [
  {
    component: CNavItem,
    name: 'Users',
    to: '/theme/colors',
    icon: <CIcon icon={PeopleIcon} customClassName="nav-icon" />,
  },
]
export default _nav

现在终端中的 NPM 显示 Compiled successfully! 但我在 console.dev 中得到一个带有此错误的空白页：

未捕获的错误：找不到模块“@emotion/react”

【问题讨论】：

您是否尝试删除node_modules 文件夹并再次运行npm install？
我在安装材料 ui biblio 后通过重新启动 npm 编译器来修复它

标签： reactjs material-ui core-ui

【解决方案1】：

首先，建议您在安装新软件包后重新启动 npm 终端。

其次，不能像使用 CoreUi 图标一样实现 materialUI 图标。您必须使用icon: <PeopleIcon />, 而不是icon: <CIcon icon={PeopleIcon} customClassName="nav-icon" />,。

【讨论】：

【解决方案2】：

import React from 'react'
import CIcon from '@coreui/icons-react'
import { CNavItem } from '@coreui/react'
import PeopleIcon from '@mui/icons-material/People'

const _nav = [
  {
    component: CNavItem,
    name: 'Users',
    to: '/theme/colors',
    icon: { PeopleIcon },
  },
]
export default _nav

【讨论】：

抱歉，icon: <PeopleIcon />, 没有修复它，我仍然遇到上面相同的错误。