我将 React 与 TypeScript 和 Material UI 结合使用。所以我有以下布局
<MuiThemeProvider theme={muiTheme}>
<My Component/>
</MuiThemeProvider>
然后在我的组件中我有类似的东西
let styles: any = ({ palette }: any) => ({
root: {
marginTop: 10
}
});
export default withStyles(styles)(MyComponent);
如果我想在多个组件之间共享 root
类,首选方法是什么?使用 createMuiTheme
创建 Material UI 主题时,我可以扩展它吗?
任何建议将不胜感激
最佳答案
这是我在 Material-ui 中定义自定义主题的方式
const Theme = createMuiTheme({
typography: {
fontSize: 18,
},
palette: {
primary: {
light: '#40bbbf',
main: '#032B43',
dark: '#0b777b',
},
},
customCommonClass: {
textAlign: center,
},
})
Theme.overrides = {
MuiListItemIcon: {
root: {
marginRight: 0,
},
},
MuiListItem: {
dense: {
paddingTop: '4px',
paddingBottom: '4px',
},
},
}
这个创作有3个部分:
- 首先我将定义我的主题的一些默认值(例如字体大小和调色板颜色)
第二步,我创建了一些全局类
customCommonClass
,我可以在以后的所有样式化组件中使用它(您的问题)我覆盖了一些 material ui 组件类。
希望对你有帮助
关于css - 使用 withStyles 和 material ui 的通用类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52727690/