Material-ui 悬停

【问题标题】：Material-ui HoverMaterial-ui 悬停
【发布时间】：2022-06-27 23:36:14
【问题描述】：

对不起，如果沟通有点差，我正在使用翻译。我的问题如下：我可以在 Material-Ui 中执行此操作吗？

.boxspecial:hover{
  .titlelong{
      // css
   }
}```

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

一种方法是在您的组件内添加类.boxspecial 如下（请注意sx 将在您在另一个MUI 组件中使用它时起作用）：

sx={{
    ":hover .titlelong": {
      // Your css here
    }
  }}

例如使用 MUI Box:

<Box class='boxspecial'
    sx={{
      "&:hover .titlelong": {
        backgroundColor: "orange"
      }
    }}
  >
    <span class='titlelong'>Some text</span>
</Box>

【讨论】：