选择内联样式中的子元素Material UI makestyles

问题描述

我正在使用材质 ui makeStyles 进行样式设置，但无法从 style.js 中选择子元素

style.css

.item:hover > .subListItem {
  display: block;
}

当我将其更改为内联样式时，它不起作用。

style.js

item: {
  "&:hover > .subListItem": {
    display: "block",},

这是我如何申请课程

<li className={classes.item}>
  <Paper elevation={3} className={classes.subListItem}>
    <ul className={classes.subItem}>
      <li>
        <Link to="/cs">COmpuTER SOCIETY</Link>
      </li>
      <li>
        <Link to="/ras">RAS</Link>
      </li>
      <li>
        <Link to="/wie">WIE</Link>
      </li>
    </ul>
  </Paper>
</li>

内联样式中选择子元素的正确方法是什么？

解决方法

MUI 类名称是不确定的，请花一些时间查看 documentation 以了解其含义。

classes.subListItem 不会导致将 subListItem 类附加到 DOM 元素。您还可以通过检查 DevTools 中的元素来查看此行为。

要完成这项工作，您需要一个静态类名：

<Paper elevation={3} className="subListItem">

一些相关说明：

“内联样式” 指的是使用 style 属性，这里不是这种情况。您正在做的称为 CSS-in-JavaScript，或者更具体地说，JSS。不过，您仍在使用 class 属性。

子组合器的使用可能会很棘手，因为单个 MUI 组件可能会产生多个 DOM 元素，而且您可能并不总是希望直接定位子项。每个组件 API 都会为您提供有关如何更改样式的提示。

inline-styles material-ui