找不到模块：无法解析“E:\frontend\node_modules\@mui\styled-engine”中的“@emotion/react”

Question

我正在尝试从 导入一个盒子组件@mui/material/Box。我已经使用以下命令安装了 Material-UI 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