Reactjs 在makeStyle（）中处理多个类名

我试图处理多个类名来定制HTML元素的样式，但我不明白如何使用React的

makeStyle

方法复制这种情况

情况很简单，我有一些带有className

slide

的块，其中一个块总是

active

（因此className=（{classes.slide:true}，{classes.active:true}）

在css中，我会这样定义：

。幻灯片{
}
.slide.active{
}

我可以对

makeStyle（）

执行类似的操作吗？或者我应该用

{classes.active:true}

替换

{classes.activeSlide:true}

并按如下方式处理这种情况：

幻灯片：{
},
活动幻灯片：{
},

您可以使用“&”字符在其值对象内访问当前类名。在您的情况下，它是这样的：

const类={
幻灯片：{
背景颜色：“青色”，
“&.active”：{
背景颜色：“金色”
}
}
}

第一个选项：

纱线添加clsx

是有条件构造类名字符串的实用工具

第二个选项：

---

className={${classes.slide}${classes.activeSlide}

：active

是一个伪类。

makestyles

为所有psuedo类提供了如下解决方案：

const useStyles = makeStyles(theme => ({
 slide: {
  color: '#000',

  '&:active': {
   color: '#fff'
  }
 }
)})

另外，当使用

makeStyles

时，您必须调用

const classes=useStyles（）

以获得使用类名称的权限，如

classes.slide

作为render方法中任何jsx/html元素的

className

属性的值

编辑/更新：

在物料界面

makeStyles

方法中， 当一个元素同时拥有两个类时，您希望为多个类编写通用样式规则。因此，对于material ui

makeStyles

方法，您可以在

makeStyles

中定义多个类，如：

const useStyles = makeStyles(theme => ({
 class1: {
  marginTop: 100,
 },
 class2: {}
}))

还可以使用模板文字将它们附加到元素，如：

<div className={`${classes.class1} ${classes.class2}`}>

因此，即使

class2

不是孤立需要的，我们也需要定义一个虚拟对象，以便在

render

中使用

class2.class2

可以访问它，如果需要，您可以向它添加与任何其他类名一样工作的样式

---

此外，还找到了对此的文档引用。

您需要用空格字符串分隔类，如下所示：

• 在两个makeStyles类之间：

• 在MakeStyle类和CSS类之间：

---

已经尝试过了，但它适用于普通类，而不是

类名

。您应该编辑帖子，添加一些详细信息来解释您的解决方案。这不是真正的解决方案。问题是在同时具有类名“class1”和“class2”的元素上应用样式。在css中，我会执行

.class1.class2{…}

，但这不能用Material UI的

makeStyle（）

完成。如果您只想访问多个类作为类名值，只需使用模板字符串，如

className={

${classes.slide}${classes.slide2}

}

是的，当然。但是我称类名为active，因为它作为属性而不是状态在元素上，所以我不能使用伪类

：active

。我有一个带有5个幻灯片的滑块；我应该移动它并显示带有“active”的滑块类，所以我想在slide元素上应用一种样式，className

slide

，但这是唯一显示的样式，因此它也有

活动的
className。好吧，我认为您可以用我提到的相同方式实现，因为模板文本可以计算js表达式，所以您可以有条件地应用多个类，如
className:{${classes.slide}${isActive？classes.slide2:'}}
我在将类堆积到元素/组件中时确实没有问题，但我不知道如何将我的样式应用到同时具有两个类名的元素上。在css中，我希望这样做，但我不知道如何使用
makeStyles（）实现
：
css.class1.class2{…}
更新了我的答案。希望此更新最终能解决您的问题。@SamueleArchisio请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，并且更有可能吸引您pvotes
const useStyles = makeStyles(theme => ({
 class1: {
  marginTop: 100,

  '&$class2': {
   color: 'red'
  }

 },
 class2: {}
}))

className = {classes.class1 + ' ' + classes.class2 }

className ={classes.class1 + ' ' +  'cssClass'}

                      OR

className ={classes.class1 + ' cssClass'}