在"内联样式"(Material UI makestyles)中选择子元素

Question

我正在使用材料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>

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

Answer 1

MUI类名是不确定的，请花一些时间查阅文档了解这意味着什么。

CCD_ 1不会导致CCD_ 2类被附加到DOM元素。您还可以通过检查DevTools中的元素来查看这种行为。

为了实现这一点，您需要一个静态类名：

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

一些相关注释：

"；内联样式">指的是style属性的使用，这里的情况并非如此。您正在做的事情在JavaScript中被称为CSS，或者更具体地说，是JSS。不过，您仍在使用class属性。

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