在内联样式中选择子元素（Material UI makestyles）答案

【问题标题】：Select child element in Inline styling ( Material UI makestyles )在内联样式中选择子元素（Material UI makestyles）
【发布时间】：2021-06-06 07:43:29
【问题描述】：

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

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

【问题讨论】：

请同时提供如何将您的类应用于 JSX 元素的代码。我假设这里的问题是.item 是一个静态类名，但classes.item 是一个动态类名。后者不针对class="item"
我已将类添加为 className={classes.item}
而您的静态item 课程完全消失了？如果不知道 DOM 结构和知道哪些类应用在哪里，这是不可能调试的。
我已经添加了 JSX 代码。是的，我已经完全删除了静态类

标签： material-ui inline-styles

【解决方案1】：

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

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

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

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

一些相关说明：

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

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

【讨论】：

感谢您的回答，这有助于了解如何将类添加到 DOM。但是在看到你的答案后，我只是使用了模板文字并添加了一个静态类和一个动态类。 <Paper elevation={3} className={``${classes.subListItem} subListItem}``>这种做法是否正确，因为我添加了与动态相同的静态类
一般来说，这绝对没有错。您的语法不正确。对于手头的情况，我将从li 元素中删除类属性，并使用classes.sublistItem 和sublistItem: { "li:hover > &": {...} }。还可以看看 classnames 和 clsx 包，它们非常有用。