css - 使用 withStyles 和 material ui 的通用类

Question

我将 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 主题时，我可以扩展它吗？

任何建议将不胜感激

Answer 1

这是我在 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个部分:

1. 首先我将定义我的主题的一些默认值(例如字体大小和调色板颜色)

2. 第二步，我创建了一些全局类 customCommonClass，我可以在以后的所有样式化组件中使用它(您的问题)

3. 我覆盖了一些 material ui 组件类。

希望对你有帮助