[英]Cannot import @material-ui/core/styles/MuiThemeProvider
I am working on a React project, using Material UI React components.我正在开发一个 React 项目,使用 Material UI React 组件。 I want to import
MuiThemeProvider
in src/index.js
like so import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
我想在
src/index.js
中导入MuiThemeProvider
,就像import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
. .
But I get但我明白了
Module not found: Can't resolve '@material-ui/core/styles/MuiThemeProvider'
找不到模块:无法解析“@material-ui/core/styles/MuiThemeProvider”
Checking the /node_modules/@material-ui/styles
there is no MuiThemeProvider
.检查
/node_modules/@material-ui/styles
没有MuiThemeProvider
。 I dont understand that.我不明白。 Installing the project freshly on another computer, the
/node_modules/@material-ui/styles
contains a MuiThemeProvider
.在另一台计算机上新安装项目,
/node_modules/@material-ui/styles
包含一个MuiThemeProvider
。 I removed the node_modules
folder and reinstalled with yarn install
, but that did not do anything.我删除了
node_modules
文件夹并使用yarn install
重新安装,但这并没有做任何事情。 When I install the project freshly on another computer, it works fine.当我在另一台计算机上新安装项目时,它工作正常。
These are the dependencies from package.json
这些是
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"
},
Why would it install differently on two machines?!为什么它会在两台机器上以不同的方式安装?!
It is not necessary to explicitly pull in @material-ui/styles
(as indicated in Davin's answer).没有必要明确引入
@material-ui/styles
(如 Davin 的回答所示)。 In fact, including that package explicitly in your package.json
can lead to problems due to it getting pulled into your bundle more than once.事实上,在 package.json 中明确包含
package.json
可能会导致问题,因为它不止一次被拉入您的捆绑包中。
From https://material-ui.com/blog/september-2019-update/ :来自https://material-ui.com/blog/september-2019-update/ :
Starting with v4.5.1, the documentation mentions @material-ui/core/styles as much as possible.
从 v4.5.1 开始,文档尽可能地提到了@material-ui/core/styles。
This change removes the need to install the @material-ui/styles package directly.
此更改消除了直接安装 @material-ui/styles package 的需要。 It prevents the duplication of @material-ui/styles in bundles and avoids confusion.
它可以防止 @material-ui/styles 在包中重复并避免混淆。
Also see https://material-ui.com/styles/basics/#material-ui-core-styles-vs-material-ui-styles另请参阅https://material-ui.com/styles/basics/#material-ui-core-styles-vs-material-ui-styles
The problem with your import is that you had:您的导入问题是您有:
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
instead of:代替:
import {MuiThemeProvider} from "@material-ui/core/styles";
The first would only work if MuiThemeProvider
was a separate file or directory within @material-ui/core/styles
, but it is not.第一个只有在
MuiThemeProvider
是@material-ui/core/styles
中的单独文件或目录时才有效,但事实并非如此。 The second syntax is for a named export from @material-ui/core/styles
which is what it is .第二种语法是从
@material-ui/core/styles
命名的导出, 它就是这样。
It looks as though you need to pull in another package: @material-ui/styles
.看起来您需要引入另一个 package:
@material-ui/styles
。 Then, you can use ThemeProvider
component to set up themes as described here .然后,您可以使用
ThemeProvider
组件来设置主题,如此处所述。
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
const theme = createMuiTheme({
...
})
...
<ThemeProvider theme={theme}>
<MyChild />
</ThemeProvider>
...
You should use the new library: @mui/material/
您应该使用新库:
@mui/material/
As an example this is my app例如,这是我的应用程序
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.