将鼠标悬停在情绪/样式材料Ui中的另一个组件作为目标

Question

我有一个来自MUI的抽屉组件，我使用从import { styled } from "@mui/material/styles";导入的styled对其进行样式设置

如何从ListItem瞄准ListButton？

const ListButton = styled(ListItemButton)<StyledListItemButtonProps>(
({ theme }) => ({
padding: 14,
borderRadius: 8,
minHeight: 48,
justifyContent: "center",
})
);
const TheListItem = styled(ListItem)(({ theme }) => ({
display: "flex",
":hover": {
ListButton: {
backgroundColor: "rgba(255,255,255,0.05)",
".MuiListItemIcon-root": {
svg: {
fill: theme.palette.primary.main,
},
},
},
},
}));

这不起作用。

p.s我不想从'@emotion/styled'导入

Answer 1

要使用组件作为选择器，您应该安装@memotion/babel/plugin。

如果您想从"@mui/材料/样式"；，您可能需要添加一个导入映射来为样式实用程序提供不同的导入。

在这个github问题中有一个正在工作的代码沙盒