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

Question

I need to use Material UI icons in a React dashboard template of CoreUI, for that, i installed @mui/material and @mui/icons-material with:

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

And

npm install @mui/icons-material

This is my package.json now:

"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"
//...
}

Then in the src/_nav.js file, there where should i import the icon and use it. So i tried this code below:

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

Now the NPM in terminal shows Compiled successfully! but i'm getting a blank page with this error in console.dev:

Uncaught Error: Cannot find module '@emotion/react'

Answer 1

first of all, it's recommanded that you restart your npm terminal after installing new package.

Secondly, you can't implement materialUI icon in the same way you use CoreUi icons. You have to use icon: <PeopleIcon />, instead of icon: <CIcon icon={PeopleIcon} customClassName="nav-icon" />, .

Answer 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