无法导入@ material-ui/core/styles/MuiThemeProvider [英] Cannot import @material-ui/core/styles/MuiThemeProvider

问题描述

我正在使用Material UI React组件进行React项目.我想像这样在src/index.js中导入MuiThemeProvider import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";

I am working on a React project, using Material UI React components. I want to import MuiThemeProvider in src/index.js like so import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; .

但是我明白了

未找到模块:无法解析'@ material-ui/core/styles/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，但这没有任何作用. 当我在另一台计算机上全新安装该项目时，它可以正常工作.

Checking the /node_modules/@material-ui/styles there is no MuiThemeProvider. I dont understand that. Installing the project freshly on another computer, the /node_modules/@material-ui/styles contains a MuiThemeProvider. I removed the node_modules folder and reinstalled with yarn install, but that did not do anything. When I install the project freshly on another computer, it works fine.

这些是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"
  },

为什么在两台计算机上安装的方式不同?！

Why would it install differently on two machines?!

推荐答案

显式拉入@material-ui/styles(如戴文答案所示)不是必需的.实际上，在您的package.json >中明确包含该软件包可能会导致问题由于它不止一次被拉入捆绑包中.

It is not necessary to explicitly pull in @material-ui/styles (as indicated in Davin's answer). In fact, including that package explicitly in your package.json can lead to problems due to it getting pulled into your bundle more than once.

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

从v4.5.1开始，文档尽可能多地提到@ material-ui/core/styles.

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

此更改消除了直接安装@ material-ui/styles软件包的需要.它可以防止捆绑中的@ material-ui/styles重复，并避免造成混淆.

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中的命名导出的，它是

The first would only work if MuiThemeProvider was a separate file or directory within @material-ui/core/styles, but it is not. The second syntax is for a named export from @material-ui/core/styles which is what it is.

这篇关于无法导入@ material-ui/core/styles/MuiThemeProvider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！