Select 内联样式中的子元素（材质 UI makestyles）

Question

我正在使用材质 ui makeStyles 进行样式设置，无法 select 来自 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>

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

Answer 1

MUI class 名称是不确定的，请花一些时间咨询 documentation 以了解其含义。

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

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

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

一些相关说明：

“inline styling”指的是style属性的使用，这里不是这样的。您正在做的事情叫做 CSS-in-JavaScript，或者更具体地说，是 JSS。不过，您仍在使用 class 属性。

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

Select 内联样式中的子元素（材质 UI makestyles）

Select child element in Inline styling ( Material UI makestyles )

inline-styles

material-ui