时间戳

首页 > 解决方案 > 使用带有 withStyles 和材质 ui 的通用类

css - 使用带有 withStyles 和材质 ui 的通用类

问题描述

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

  <MuiThemeProvider theme={muiTheme}>
     <My Component/>
  </MuiThemeProvider>

然后在我的组件中，我有类似的东西

let styles: any = ({ palette }: any) => ({
  root: {
    marginTop: 10
  }
});

export default withStyles(styles)(MyComponent);

如果我想root在多个组件之间共享类，那么首选的方法是什么？我可以在使用创建 Material UI 主题时扩展它createMuiTheme吗？

任何建议将不胜感激

标签： cssreactjsmaterial-uijss

解决方案

这是我在 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. 我覆盖了某些类的材质 ui 组件。

希望这可以帮助

推荐阅读