Material-UI - установить выбранный цвет ListItemSecondaryAction

Я пытаюсь изменить цвет, если выбран 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>

reactjs material-ui jss
person Dzefo    schedule 23.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ладно, забудь ...

Я мог бы просто сделать это:

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>
person Dzefo    schedule 23.04.2020