使用 makeStyles 将 class 嵌套在另一个选定的 class 中

Question

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

这是 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>

Answer 2

此答案可替代@Chris 的答案。

您不需要在项目中包含其他包，因为您可以使用 Material-UI 中的 'clsx'。方法如下：

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

clsx 软件包在安装时会附带Material-UI。

import clsx from 'clsx';
const classes = useStyles(props);

...

<div className={clsx(classes.root, {
        [classes.selected]: elementSelected
    })}
>
    <div className={classes.element}>
    </div>
</div>

使用 makeStyles 将 class 嵌套在另一个选定的 class 中

Nested class in another selected class with makeStyles

css

reactjs

material-design

material-ui

jss