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

Posted 2023-02-22

【中文标题】使用 makeStyles 在另一个选定的类中嵌套类

【英文标题】：Nested class in another selected class with 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>

【参考方案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）应该只包含一份依赖副本，你的包管理器也应该只下载一份。