我正在使用Material UI React组件进行React项目。我想像这样导入MuiThemeProvidersrc/index.jsimport 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中可能会导致问题，因为它被多次拉入您的捆绑包中。
从 https://material-ui.com/blog/september-2019-update/：
从 v4.5.1 开始，文档尽可能多地提及 @material-ui/core/styles。
此更改消除了直接安装 @material-ui/styles 包的需要。它可以防止捆绑包中重复@material-ui/样式并避免混淆。
另请参阅 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