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

Я использую 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?

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


reactjs material-ui css jss
person Bryant11    schedule 09.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

person Adrien    schedule 12.10.2018
comment
Что ж, я не уверен, что вышеупомянутый подход будет работать с определениями машинописного текста. - person Bryant11; 12.10.2018
comment
не большой знаток машинописи. Вам, вероятно, потребуется внести несколько изменений, чтобы ввести переменные, но я почти уверен, что это шаблон, который вы можете использовать для определения глобальной темы. - person Adrien; 15.10.2018