使用 makeStyles 在另一个选定的类中嵌套类答案

【问题标题】：Nested class in another selected class with makeStyles使用 makeStyles 在另一个选定的类中嵌套类
【发布时间】：2020-04-10 12:44:20
【问题描述】：

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

这是makeStyles：

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

这是 jsx

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

【问题讨论】：

标签： css reactjs material-design material-ui jss

【解决方案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>

【讨论】：

然后makeStyles会怎么样？
你的 Jss 没问题。无需更改
No, my makeStyles does not target .element when root is selected.实际上，这就是我所缺少的。
抱歉，刚刚忽略了我最后的评论。我现在也包含了 jss 更改
嗨@ChrisChen。我正在尝试做类似的事情，但无法实现这一目标并且无法弄清楚原因。 codesandbox.io/s/mystifying-swanson-yys5n，这是演示。在此，我试图更改悬停在父级上的图标颜色。你能帮忙吗

【解决方案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>

【讨论】：

仅仅因为在安装其他东西时安装了依赖项，并不意味着您不应该直接将其添加到您的项目中。你的包生成器（如 Webpack）应该只包含一份依赖副本，你的包管理器也应该只下载一份。