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个部分：

首先，我将定义主题的一些默认值（以fontSize和调色板颜色为例）
第二个步骤是我创建一些全局类customCommonClass，可以在以后的所有样式化组件中使用它（您的问题）
我重写了一些材料ui组件类。

希望这会有所帮助

在withStyles和material ui中使用通用类

1 个答案: