使用makeStyles在另一个选定类中的嵌套类 [英] Nested class in another selected class with makeStyles

问题描述

我需要知道选择root时如何定位'element'

I need to know how to target 'element' when root is selected

这是makeStyles:

This is makeStyles:

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

这是jsx

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

推荐答案

您可以使用 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>

这篇关于使用makeStyles在另一个选定类中的嵌套类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！