14
Material UI 如何引入自定义主题
source link: https://www.ixiqin.com/2021/10/material-ui-how-to-introduce-a-custom-theme/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Material UI 如何引入自定义主题
在 Next.js 中，如果你希望为 Material UI 引入自定义主题，可以如下实现
1. 设计自定义主题
参考 Theming 主题 – MUI 来定制自己的主题，所有的属性可以在 默认主题 – MUI 找到。修改你需要修改的对应项目即可。剩下的可以使用默认。
2. 修改代码，引入主题
修改你的 pages/_app.js，在其中添加如下代码，来应用你的主题。
import { ThemeProvider, createTheme } from '@material-ui/core/styles';
const themeOptions = createTheme({
palette: {
type: 'dark',
primary: {
main: '#ff9900',
}
},
});
function MyApp({ Component, pageProps }) {
return (
<ThemeProvider theme={themeOptions}> <Component {...pageProps} /></ThemeProvider>
)
}发布日期：2021年10月30日
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK