Material-UI

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>

Material-UI - 设置 ListItemSecondaryAction 的选定颜色

Material-UI - set selected color of ListItemSecondaryAction

reactjs

jss