условный рендеринг с makeStyles () в MUI

Question

В этом коде я пытался использовать props.disabled для динамического изменения значения backgroundColor в свойстве "& + $track", но MUI не распознает его. Почему?

const useStyles = makeStyles((theme) => ({
  root: {
    overflow: "visible",
    width: 36,
    height: 16,
    padding: 0,
    margin: theme.spacing(0.5),
    display: "flex",
  },
  switchBase: {
    padding: 2,
    color: theme.palette.grey[500],
    "&$checked": {
      transform: "translateX(18px)",
      color: theme.palette.common.white,
      "& + $track": {
        opacity: 1,
        backgroundColor: props => props.disabled ? theme.palette.grey[500] : theme.palette.primary.main,
        borderColor: theme.palette.primary.main,
      },
      "&:hover": {
        color: theme.palette.common.white,
      },
    },
    "&:hover": {
      color: theme.palette.primary.main,
    },
  },
  thumb: {
    width: 14,
    height: 14,
    boxShadow: "none",
  },
  track: {
    border: `1px solid ${theme.palette.grey[500]}`,
    borderRadius: 18 / 2,
    opacity: 1,
    backgroundColor: theme.palette.common.white,
  },
  checked: {
  },
}));

const StyledSwitch = (props) => {
  const classes = useStyles(props);
  return (
    <Switch
      classes={{
        root: classes.root,
        switchBase: classes.switchBase,
        input: classes.input,
        thumb: classes.thumb,
        track: classes.track,
        checked: classes.checked,
      }}
      {...props}
    />
  );
};

Answer 1

Вы не можете использовать реквизит внутри makeStyles, поскольку он там недоступен. Используйте переменную props.disabled в JSX для условного применения класса, а затем определите этот класс в makeStyles (определите здесь backgroundColor).

Или используйте класс Mui-Disabled (псевдокласс, применяемый к внутреннему компоненту SwitchBase). класс инвалидов)

"& + $track": {
    opacity: 1,
    backgroundColor: theme.palette.primary.main,
    borderColor: theme.palette.primary.main,
},    
"&.Mui-disabled + $track": {
    backgroundColor: theme.palette.grey[500],
},