1. ホーム
  2. javascript

[解決済み] material-ui/core/styles/MuiThemeProvider をインポートできない。

2022-02-18 21:51:54

質問

私はReactプロジェクトに取り組んでおり、Material UI Reactコンポーネントを使用しています。私は、インポートしたい MuiThemeProvidersrc/index.js というように import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; .

しかし、私は

モジュールが見つかりませんでした。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"
  },

なぜ2台のマシンでインストールが違うんだ!?

解決方法は?

それは ではない を明示的に引き込む必要があります。 @material-ui/styles (Davinの回答にあるように)。実際、そのパッケージを明示的に package.json が問題になることがあります。 バンドルに複数回引き込まれるためです。

から https://material-ui.com/blog/september-2019-update/ :

v4.5.1 からは、ドキュメントで @material-ui/core/styles について可能な限り言及するようにしました。

この変更により、@material-ui/styles パッケージを直接インストールする必要がなくなりました。バンドルで@material-ui/stylesが重複することを防ぎ、混乱を回避することができます。

以下もご参照ください。 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 が、そうではありません。2つ目の構文は、名前付きエクスポートで @material-ui/core/styles というのは それが何であるか .