Как использовать несколько стилей в интерфейсе материала с помощью Style () React JS?

Question

У меня есть следующее:

const styles = theme => ({root: {backgroundColor: '#000000'})
const styles2 = theme => ({root: {backgroundColor: '#fff'})

на моем компоненте реагирования У меня есть экспорт по умолчанию compose (withStyles ( styles , {withTheme: true}),

Мне нужно определить, какой стиль использовать в render (), как лучше всего это сделать?

Answer 1

После долгих исследований лучшее решение, с которым я пришел, выглядит следующим образом:

Я импортировал classNames package

Использовал только один стиль

const styles = theme => ({
  whiteRoot: {
    backgroundColor: '#fff',
  },
  blackRoot: {
    backgroundColor: '#000000',
  },
})

и на render () например

<Grid container className={classNames(classes[`${black}Root`])} justify='center'>

и работало нормально