javascript - 无法导入@material-ui/core/styles/MuiThemeProvider

Question

我正在使用 Material UI React 组件开发一个 React 项目。我想像这样在 src/index.js 中导入 MuiThemeProvider从“@material-ui/core/styles/MuiThemeProvider”导入 MuiThemeProvider；.

但是我明白了

Module not found: Can't resolve '@material-ui/core/styles/MuiThemeProvider'

检查 /node_modules/@material-ui/styles 没有 MuiThemeProvider。我不明白。在另一台计算机上全新安装项目，/node_modules/@material-ui/styles 包含一个 MuiThemeProvider。我删除了 node_modules 文件夹并使用 yarn install 重新安装，但这没有做任何事情。当我在另一台计算机上全新安装该项目时，它工作正常。

这些是来自 package.json

的依赖项

"dependencies": {
    "@material-ui/core": "^4.5.0",
    "@material-ui/icons": "^3.0.2",
    "@turf/turf": "^5.1.6",
    "axios": "^0.18.0",
    "epsg-index": "^0.27.0",
    "immutable": "^3.8.2",
    "immutable-prop-types": "^0.0.3",
    "lodash": "^4.17.11",
    "mapbox-gl": "^1.2.0",
    "moment": "^2.22.2",
    "particles.js": "^2.0.0",
    "phoenix": "^1.4.8",
    "proj4": "^2.5.0",
    "prop-types": "^15.7.2",
    "rc-tooltip": "^3.7.3",
    "react": "^16.4.2",
    "react-dom": "^16.9.0",
    "react-loader-spinner": "^2.3.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^5.0.0",
    "react-slick": "^0.23.2",
    "react-stripe-elements": "^4.0.0",
    "react-test-renderer": "^16.8.1",
    "redux": "^4.0.0",
    "redux-actions": "^2.6.1",
    "redux-auth-wrapper": "^2.1.0",
    "redux-devtools-extension": "^2.13.5",
    "redux-immutable": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "enzyme-to-json": "^3.3.5",
    "jsdom": "^13.2.0",
    "jsdom-global": "^3.0.2",
    "react-scripts": "2.1.8",
    "redux-mock-store": "^1.5.3"
  },
  "resolutions": {
    "**/**/fsevents": "^1.2.9"
  },

为什么它会在两台机器上安装不同？!

Answer 1

没有需要显式引入 @material-ui/styles(如 Davin 的回答中所示)。事实上，在您的 package.json 中显式包含该包 can lead to problems因为它不止一次被拉进你的包里。

来自 https://material-ui.com/blog/september-2019-update/ :

Starting with v4.5.1, the documentation mentions @material-ui/core/styles as much as possible.

This change removes the need to install the @material-ui/styles package directly. It prevents the duplication of @material-ui/styles in bundles and avoids confusion.

另见 https://material-ui.com/styles/basics/#material-ui-core-styles-vs-material-ui-styles

导入的问题在于:

import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";

代替:

import {MuiThemeProvider} from "@material-ui/core/styles";

只有当 MuiThemeProvider 是 @material-ui/core/styles 中的单独文件或目录时，第一个才会起作用，但事实并非如此。第二种语法用于来自 @material-ui/core/styles 的命名导出，即 what it is .