Использование общих классов с withStyles и интерфейсом материала - PullRequest
Новая
       12

Использование общих классов с withStyles и интерфейсом материала

0 голосов
/ 09 октября 2018

Я использую React с интерфейсом TypeScript и Material.Итак, у меня есть следующий макет 

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

И затем в моем компоненте у меня есть что-то похожее на 

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

export default withStyles(styles)(MyComponent);

Какой предпочтительный способ пойти, если я хочу поделиться root класс среди множества компонентов?Могу ли я расширить тему Material UI, когда создаю ее, используя createMuiTheme?

Любой совет будет высоко оценен

1 Ответ

0 голосов
/ 12 октября 2018

Вот как я определяю свою собственную тему в 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. Я переопределяю некоторые классы материальных компонентов пользовательского интерфейса.

надеюсь, что это может помочь

...