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

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

0 голосов
/ 23 апреля 2020

Я пытаюсь установить изменение цвета, если выбран элемент ListItem.

Проблема заключается в том, что действие ListItemSecondaryAction заключено не в элемент ListItem root, а в контейнер.

Как применить стили к контейнеру, если выбран 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>

1 Ответ

0 голосов
/ 23 апреля 2020

Хорошо, неважно ...

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

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>
...