css - 使用 makeStyles 在另一个选定类中嵌套类

Question

我需要知道如何在选择根时定位“元素”

这是 makeStyles:

const useStyles = makeStyles(theme => ({
   root:{
      '&.selected': {
      }
   },
   element: {
   }
})

这是jsx

<div className={`${classes.root} ${elementSelected ? 'selected : ''}`}>
  <div className={classes.element}>
  </div>
</div>

Answer 1

您可以使用 https://www.npmjs.com/package/classnames实现这一目标。

const useStyles = makeStyles(theme => ({
   root:{
      '&.selected $element': {
      }
   }
})

还有你的 JSX

import classNames from 'classnames';

...

<div className={classNames(classes.root, elementSelected ? 'selected : '')}>
  <div className={classes.element}>
  </div>
</div>