javascript - 找不到模块 : Can't resolve '@emotion/react' in 'E:\frontend\node_modules\@mui\styled-engine'

Question

我正在尝试从 @mui/material/Box 导入一个盒子组件.我已经使用以下命令安装了 MUI 5 npm i @mui/material .
但是这个错误正在发生，Module not found: Can't resolve '@emotion/react' in 'E:\frontend\node_modules\@mui\styled-engine'这是我的代码。

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>
  );
}

有人可以帮我解决这个问题吗？

Answer 1

@emotion/react和 @emotion/styled是许多 mui 的对等依赖项包，即 @mui/material .这给了我们更多的自由来决定我们想要使用哪个情感版本，但这确实意味着我们必须自己安装依赖项。

npm i @emotion/react @emotion/styled