我是 React 和 MUI 的新手，但我必须编写一个具有漂亮样式的企业应用程序。我想为我的应用程序使用某种全局样式（以便以后能够更改它）以及 react 中的功能组件（也许我稍后会添加 redux）。
具有react和材料（最新版本）的全局样式的最佳实践方法是什么？
这个 ( ThemeProvider): https://material-ui.com/styles/advanced/怎么样？我阅读了MuiThemeProvider但在材料版本 4 文档中找不到它。它已经过时了吗？MuiThemeProvider 和 之间有什么区别ThemeProvider？
React（客户端渲染）和 Material（最新版本）后端：节点
您实际上可以使用 Material UI 编写全局样式：
const useStyles = makeStyles((theme) => ({
'@global': {
'.MuiPickersSlideTransition-transitionContainer.MuiPickersCalendarHeader-transitionContainer': {
order: -1,
},
'.MuiTypography-root.MuiTypography-body1.MuiTypography-alignCenter': {
fontWeight: 'bold',
}
}
}));
具有 Material UI 和 React 的全局样式
// 1. GlobalStyles.js
import { createStyles, makeStyles } from '@material-ui/core';
const useStyles = makeStyles(() =>
createStyles({
'@global': {
html: {
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
height: '100%',
width: '100%'
},
'*, *::before, *::after': {
boxSizing: 'inherit'
},
body: {
height: '100%',
width: '100%'
},
'#root': {
height: '100%',
width: '100%'
}
}
})
);
const GlobalStyles = () => {
useStyles();
return null;
};
export default GlobalStyles;
** 然后在 App.js 中使用它，如下所示**
// 2. App.js
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { Router } from 'react-router-dom';
import { NavBar, Routes, GlobalStyles, Routes } from '../';
const theme = createMuiTheme({
palette: {
primary: {
main: 'blue'
}
}
});
const App = () => {
return (
<MuiThemeProvider theme={theme}>
<Router>
<NavBar />
<GlobalStyles />
<Routes />
</Router>
</MuiThemeProvider>
);
};
export default App;
这适用于我的react项目。
对于全局样式，您可以使用它，如下所示。这是对我有用的最佳实现。
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
'@global': {
html: {
WebkitFontSmoothing: 'auto',
},
},
},
},
});
// ...
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
更多参考：全局 CSS
根据我的经验，使用 MuiThemeProvider 和 createMuiTheme 效果很好。但是，我使用的是 Material-UI 版本 3.9.2。
MuiThemeProvider 应该环绕您的整个应用程序。您需要在所有组件中做的就是传递一个传入主题的函数，而不是将样式对象传递给样式。
前任：
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import {NavBar, Routes} from '../'
const theme = createMuiTheme({
palette: {
primary: {
main: 'red'
},
},
/* whatever else you want to add here */
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<NavBar />
<Routes />
</MuiThemeProvider>
)
}
然后在导航栏中让我们说：
import React from 'react';
import { withStyles } from '@material-ui/core';
const styles = theme => ({
root: {
color: theme.palette.primary.main,,
}
})
const NavBar = ({classes}) => {
return <div className={classes.root}>navigation</div>
}
export default withStyles(styles)(NavBar);
希望有帮助，对我来说效果很好！