如何在材质 ui withStyles() React JS 中使用多种样式？答案

【问题标题】：How to use multiple styles in material ui withStyles() React JS?如何在材质 ui withStyles() React JS 中使用多种样式？
【发布时间】：2020-03-03 09:57:11
【问题描述】：

我有以下：

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

在我的反应组件上我有导出默认撰写（ withStyles(styles, {withTheme: true}),

我需要确定在 render() 中使用什么样式最好的方法是什么？

【问题讨论】：

使样式处于状态并在组件道具上赋予该状态，然后开始更改将重新渲染组件的状态值
在主题风格上传递道具变量时，有没有办法确定我使用的风格？
如果您的意思是在空闲、聚焦或选择时应该是什么背景颜色，您会在 withStyle 中获得一个 args 来确定它，但是如果您想根据业务条件更改颜色，请尝试制作颜色作为状态意味着将背景颜色作为状态并将状态传递给主题背景值

标签： javascript reactjs material-ui

【解决方案1】：

经过长期调查，我得出的最佳解决方案如下：

我已经导入了 classNames package

只使用了一种风格

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

在渲染（）上例如

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

工作正常

【讨论】：