Пользовательский отключенный стиль для флажка Material UI?

Question

Я создаю дизайн-систему, которая использует под капотом Material UI. Мне нужно настроить дизайн отключенного флажка.

Почему в этом коде стиль disabled, устанавливающий золотой цвет, не применяется?

import CheckboxMUI from '@material-ui/core/Checkbox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import FormControlLabel from '@material-ui/core/FormControlLabel';

const Checkbox = ({ label, onChange, checked, disabled }) => {
  const theme = useTheme();
  const useStyles = makeStyles({
    root: {
      color: theme.palette.secondary.main,
      '&$disabled': {
        color: 'gold',
      },
    },
  });
  const classes = useStyles();

  return (
    <div>
      <FormControlLabel
        disabled={disabled}
        classes={{
          root: classes.root,
        }}
        control={
          <CheckboxMUI
            disabled={disabled}
            checked={checked}
            onChange={onChange}
            name="checkedA"
            color="primary"
            icon={
              <CheckBoxOutlineBlankIcon
                htmlColor={!disabled ? theme.palette.secondary.main : undefined}
              />
            }
          />
        }
        label={label}
      />
    </div>
  );
};

Answer 1

Это сработало для меня:

  const useStyles = makeStyles({
    root: {
      color: theme.palette.secondary.main,
    },
    label: {
      '&.Mui-disabled': {
        color: theme.colors.disabledForeground,
      },
    },
  });

  <FormControlLabel
    disabled={disabled}
    classes={{
      root: classes.root,
      label: classes.label,
    }}