Невозможно импортировать @ material-ui / core / styles / MuiThemeProvider

Question

Я работаю над проектом React, используя компоненты React материала. Я хочу импортировать MuiThemeProvider в src/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"
  },

Почему он устанавливается по-разному на двух компьютерах?!

Answer 1

Необходимо , а не , чтобы явно указать @material-ui/styles (как указано в ответе Дэвина). Фактически, включение этого пакета в ваш 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";

first будет работать, только если MuiThemeProvider был отдельным файлом или каталогом в @material-ui/core/styles, но это не так. Второй синтаксис для именованного экспорта из @material-ui/core/styles, который равен , что это .

Answer 2

Похоже, вам нужно вытащить в другой пакет: @material-ui/styles. Затем вы можете использовать компонент ThemeProvider для настройки тем , как описано здесь .

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const theme = createMuiTheme({
    ...
})

...
    <ThemeProvider theme={theme}>
      <MyChild />
    </ThemeProvider>
...