![](/img/trans.png)
[英]import error: Module not found on using @material-ui/core/styles/ThemeProvider/ and @material-ui/core/styles/createMuiTheme/
[英]Cannot import @material-ui/core/styles/MuiThemeProvider
我正在开发一个 React 项目,使用 Material UI React 组件。 我想在src/index.js
中导入MuiThemeProvider
,就像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"
},
为什么它会在两台机器上以不同的方式安装?!
没有必要明确引入@material-ui/styles
(如 Davin 的回答所示)。 事实上,在 package.json 中明确包含package.json
可能会导致问题,因为它不止一次被拉入您的捆绑包中。
来自https://material-ui.com/blog/september-2019-update/ :
从 v4.5.1 开始,文档尽可能地提到了@material-ui/core/styles。
此更改消除了直接安装 @material-ui/styles package 的需要。 它可以防止 @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
命名的导出, 它就是这样。
看起来您需要引入另一个 package: @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/
例如,这是我的应用程序
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.