如何与使用材料UI的组件lib正确使用自定义主题
如何与使用材料UI的组件LIB正确使用自定义主题(我不想与它们包装所有组件)。
从'@yiter-ui/core/样式'导入{createMuitHeme};
const theme = createMuiTheme({
palette: {
primary: {
main: '#1976d2'
},
success: {
main: '#4caf50'
}
},
typography: {
fontSize: 16,
h3: {
fontWeight: 700,
fontSize: '2.2rem'
},
h4: {
fontWeight: 700,
fontSize: '1.75rem'
},
h5: {
fontWeight: 500
},
h6: {
fontWeight: 500
}
}
})
export default theme;
我只有一个索引文件,其中像往常一样导出所有组件。如何将所有组件用主题包裹起来,而无需在任何地方进行操作?还是有更好的方法来自定义样式?
How to use custom theme correctly with component lib that uses Material UI (I don't want to wrap with them all components).
import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
palette: {
primary: {
main: '#1976d2'
},
success: {
main: '#4caf50'
}
},
typography: {
fontSize: 16,
h3: {
fontWeight: 700,
fontSize: '2.2rem'
},
h4: {
fontWeight: 700,
fontSize: '1.75rem'
},
h5: {
fontWeight: 500
},
h6: {
fontWeight: 500
}
}
})
export default theme;
I have only one index file where export all my components as usual lib does. How can I wrap all my components with the theme without doing it everywhere? Or is there better way to customize styles?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以将 App.tsx 文件(或 _app.tsx,如果您使用 Next.js)包装在 ThemeProvider 中并提供您的主题:
https://mui.com/customization/theming/
You can wrap your App.tsx file (or _app.tsx if you use Next.js) in ThemeProvider and provide your theme:
https://mui.com/customization/theming/