Стили класса модификатора пользовательского интерфейса с использованием реквизита не работают

Question

Попытка установить цвета на основе реквизита для внутреннего селектора ('& $ selected' и '&: hover'). Но цвета не применяются, хотя я вижу класс, связанный с выбранным, применяемым.

const getColor = (color, theme) => {
  return color === 'primary'
    ? theme.palette.primary.contrastText
    : color === 'secondary'
    ? theme.palette.secondary.contrastText
    : theme.palette.action.active;
};

const getBgColor = (color, theme) => {
  return color === 'primary'
    ? theme.palette.primary.main
    : color === 'secondary'
    ? theme.palette.secondary.main
    : theme.palette.action.active;
};

const useStyles = makeStyles(theme => ({
  root: {
    textTransform: 'none',

    // This does not apply the set colors
    '&$selected': {
      color: ({ color }) => getColor(color, theme),
      backgroundColor: ({ color }) =>
        getBgColor(color, theme),
      // This is not applied as well
      '&:hover': {
        backgroundColor: ({ color }) =>
          getBgColor(color, theme),
      },
    },
  },
  selected: {},
}))