reactjs - Adding MUI icon to ChakraUI project - Stack Overflow

admin管理员组

文章数量:1208155

I have a chakraUI project which is using chakra2, and I want to use MUI icons. I don't need MUI for anything except the icons

When I add an icon to the page I get the following errors:

I have reproduced this in a basic Vite project

import { Schedule } from '@mui/icons-material';
import { ChakraProvider } from '@chakra-ui/react';


function App() {

  return (
    <>
    {/* Uncommenting the chakraProvider causes the error */}
    {/* <ChakraProvider>  */}
      {/* If I have the chakra provider and not the icon it all works as expected */}
      <Schedule /> 
      <h1>Hello world</h1>
      {/* </ChakraProvider> */}
    </>
  )
}

Package version:

    "@chakra-ui/react": "^2.10.5",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@mui/icons-material": "^6.4.0",
    "@mui/material": "^6.4.0",

I have no idea why these aren't working together, perhaps it has something to do with emotion, but I'm not sure how these are used internally in the two libraries or what I can do to resolve the issue.

chakra v1 and v3 don't seem to cause the issue however upgrading to v3 is a huge deal so I would really rather not do that.

本文标签： reactjsAdding MUI icon to ChakraUI projectStack Overflow