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

IT技术 javascript reactjs material-ui yarnpkg
2021-05-20 07:52:29

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

但我得到

找不到module：无法解析“@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"
  },

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

3个回答

这是不是必要明确地拉@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";

第一个只有在MuiThemeProvider是一个单独的文件或目录时才有效@material-ui/core/styles，但事实并非如此。第二种语法是用于命名导出，@material-ui/core/styles它是什么。

看起来好像你需要拉入另一个包：@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>
...

你应该使用新的库：@mui/material/是的，v5 已经发布了！检查：从 v4 迁移到 v5

例如，这是我的应用程序

import { ThemeProvider, createTheme } from '@mui/material/styles'

const theme = createTheme({
  palette: {
    primary: {
      main: '#1476A3',
    },
    secondary: {
      main: '#292977',
    },
  },
  typography: {
    fontFamily: ['Roboto', 'sans-serif'].join(','),
  },
  components: {
    MuiPaper: {
      styleOverrides: {
        rounded: {
          borderRadius: '12px',
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: '8px',
        },
      },
    },
  },
})

const App = ({ children }) => (
  <main>
    <ThemeProvider theme={theme}>{children}</ThemeProvider>
  </main>
)

export default App
其它你可能感兴趣的问题
上一篇层间壳的交替行数 下一篇未调用 ReactCSSTransitionGroup componentWillLeave