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内使用道具，因为那里没有道具。使用JSX中的props.disabled var有条件地应用一个类，然后在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],
},

MUI中使用makeStyles（）进行条件渲染

1 个答案: