MUI v5中样式化root类及ListItem样式设置无效问题求助

我来帮你搞定这个ListItem样式不生效的问题！你遇到的问题本质是对MUI v5的sx和styled API的用法理解有偏差，咱们一步步修正：

一、使用sx属性的正确写法 #

你之前在sx里嵌套root字段是错误的——MUI的sx属性默认就是直接作用于组件的根元素，不需要额外指定root键。如果你的ListItem加了button属性，根元素本身就是一个按钮元素，直接在sx里写样式和伪类即可：

<ListItem 
  button 
  onClick={handleClick} 
  sx={{
    width: "10%",
    "&:hover": {
      textDecoration: "none",
      backgroundColor: "blue",
      "@media (hover: none)": { 
        backgroundColor: "transparent" 
      }
    }
  }}
>
  {/* 内容 */}
</ListItem>

为什么之前的写法无效？ #

sx是MUI的内联样式增强方案，它的对象直接对应根元素的样式规则，不需要像自定义主题那样通过root这类类名键来嵌套。

二、使用styled组件的正确写法 #

你之前在styled里用root和button作为对象键是不对的，styled的回调函数需要直接编写CSS规则（或者MUI的样式对象），如果要针对ListItem的button状态样式，需要通过类名选择器来定位：

const MyListItem = styled(ListItem)(({ theme }) => ({
  width: "10%",
  // 当ListItem带有button属性时，根元素会添加.MuiListItem-button类，这样写hover样式
  "&.MuiListItem-button:hover": {
    textDecoration: "none",
    backgroundColor: "blue",
    "@media (hover: none)": {
      backgroundColor: "transparent"
    }
  }
}));

// 使用方式不变
<MyListItem button onClick={handleClick}>
  {/* 内容 */}
</MyListItem>

另一种更简洁的styled写法（针对button属性的情况） #

如果你的MyListItem始终会带button属性，也可以直接把样式写在根选择器上，因为此时根元素就是按钮：

const MyListItem = styled(ListItem)({
  width: "10%",
  "&:hover": {
    textDecoration: "none",
    backgroundColor: "blue",
    "@media (hover: none)": {
      backgroundColor: "transparent"
    }
  }
});

总结一下：MUI v5的样式API和v4有不少差异，v4里通过类名键（比如root、button）来定制的方式，在v5的sx和styled里不需要了，直接针对根元素或者目标类名写样式即可~

内容的提问来源于stack exchange，提问作者David