材质UI-设置ListItemSecondaryAction的选定颜色

Question

如果选择了ListItem，我将尝试设置更改颜色。

问题是ListItemSecondaryAction不是由ListItem根包装的，而是由容器包装的。

如果选择了ListItem，如何将样式应用于容器？

我的ListItem样式为：

root: {
borderRadius: 6,
padding: '0.5rem 1rem',
marginBottom: spacing(),
},
selected: {
'&.Mui-selected': {
fontWeight: 500,
backgroundColor: accentColor,
color: palette.primary.main,
'&:hover': {
color: palette.primary.main,
backgroundColor: accentColor,
},
},
},

我的JSX是：

<ListItem style={{ ...style }} classes={ListItemClasses} selected={selected} button>
<ListItemIcon className={selected ? classes.ListItemIconSelected : classes.ListItemIcon}>
{icon}
</ListItemIcon>
<ListItemText>{text}</ListItemText>
<ListItemSecondaryAction>
<IconButton color="inherit" edge="end">
<Settings />
</IconButton>
</ListItemSecondaryAction>
</ListItem>

Answer 1

好吧，没关系。。。

我本可以这么做的：

ListItemSecondarySelected: {
color: palette.primary.main,
},

<ListItem style={{ ...style }} classes={ListItemClasses} selected={selected} button>
<ListItemIcon className={selected ? classes.ListItemIconSelected : classes.ListItemIcon}>
{icon}
</ListItemIcon>
<ListItemText>{text}</ListItemText>
{canAccessSettings && (
<ListItemSecondaryAction className={selected ? classes.ListItemSecondarySelected : ''}>
<IconButton color="inherit" edge="end">
<Settings />
</IconButton>
</ListItemSecondaryAction>
)}
</ListItem>