![](/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.