使用道具的材质UI修改器类样式不起作用

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: {},
}))