I am trying to import a box component from @mui/material/Box
. I have installed MUI 5 using the following command npm i @mui/material
. But this error is occurring, Module not found: Can't resolve '@emotion/react' in 'E:\frontend\node_modules\@mui\styled-engine'
Here is my code.
import * as React from 'react';
import Box from '@mui/material/Box';
export default function WhiteSpace() {
return (
<div style={{ width: 200 }}>
<Box
component="div"
sx={{
whiteSpace: 'nowrap',
my: 2,
bgcolor: 'background.paper',
}}
>
White Space Nowrap. White Space Nowrap.
</Box>
<Box
component="div"
sx={{
whiteSpace: 'normal',
my: 2,
bgcolor: 'background.paper',
}}
>
White Space Normal. White Space Normal.
</Box>
</div>
);
}
Can someone help me fix this?
@emotion/react
and @emotion/styled
are peer dependencies of many mui
packages, ie @mui/material
. This gives us more freedom over which emotion version we would like to use, but does mean we must install the dependencies ourselves.
npm i @emotion/react @emotion/styled
Could be that the dependency @emotion/react
is out of package.json somehow. So try to run npm install @emotion/react --save
.
One of my friend faced the same issue couple of days ago, the solution is as follows:
Step 1: npm i @emotion/react Step 2: It will give same error with different dependency name, install it with npm and your app will run.
use npm i @emotion/react @emotion/styled to install @emotion/react then it will solve your problem
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.