在withStyles和material ui中使用通用类

Question

我正在使用带有TypeScript和Material UI的React。 所以我有以下布局

  <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. 首先，我将定义主题的一些默认值（以fontSize和调色板颜色为例）

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

3. 我重写了一些材料ui组件类。

希望这可以帮助