reactjs - 在 makeStyle() 中处理多个类名 - ReactJS

Question

我正在尝试处理多个 className(s) 以自定义 HTML 元素的样式，但我不明白如何复制这种情况 .class1.class2 (css) 与 makeStyle react 的方法。

情况很简单，我有一些带有 className slide 的 block 其中之一将永远是active (所以 className=({classes.slide: true}, {classes.active: true})

在 css 中，我会这样定义:

.slide {
  <some styles>
}

.slide.active {
  <some other styles>
}

我可以用 makeStyle() 做类似的事情吗？或者我应该替换{classes.active: true}与 {classes.activeSlide: true}并处理如下情况:

slide: {
  <some styles>
},

activeSlide: {
  <some other slide>
},

Answer 1

:active是一个伪类。makestyles为所有伪类提供解决方案，如下所示:

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

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

此外，当使用 makeStyles您必须调用 const classes = useStyles()访问使用类名，如 classes.slide作为 className 的值render 方法中任何 jsx/html 元素中的属性。

编辑/更新 :

在 Material ui makeStyles方法，
当一个元素同时具有两个类时，您希望为多个类编写一个通用样式规则。所以，对于 Material ui makeStyles方法，可以在makeStyles里面定义多个类像:

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

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

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

现在，制作 class1和 class2作为一个组合，我们可以做到这一点:

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

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

 },
 class2: {}
}))

所以即使 class2不是单独需要的，我们需要定义一个虚拟对象，以便我们可以在 render 内部需要时访问它使用 classes.class2如果需要，您可以为其添加样式，这将与任何其他类名一样工作。

此外，找到了此 here 的文档引用。 .