如何在 Material UI 中使用 useStyles 而不是 withStyles 设置切换开关的样式？

Question

我在 Material UI 中有一个输入表单开关，我希望轨道和按钮在打开时显示为红色，就像在 this example 中一样。 Material UI 网站上的所有switch styling examples 都使用 withStyles，但我不确定为什么不能使用 useStyles 代替？是否可以使用 useStyles 做到这一点？

这是我的尝试，但不起作用！

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Switch from '@material-ui/core/Switch';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';

const useStyles = makeStyles(theme => ({
  switchBase: {
    '&$checked + $track': {
      backgroundColor: 'red',
    },
  },
}));

export default function SwitchesSize() {
const classes = useStyles()
  const [checked, setChecked] = React.useState(false);

  const toggleChecked = () => {
    setChecked((prev) => !prev);
  };

  return (
    <FormGroup>
      <FormControlLabel
        control={<Switch size="small" checked={checked} onChange={toggleChecked} />}
        label="Small"
        classes={{ switchBase: classes.switchBase }}
      />
    </FormGroup>
  );
}

非常感谢您的帮助:)

凯蒂

Answer 1

要使用useStyles 设置Switch 的样式，需要定位根组件。

<FormGroup>
  <FormControlLabel
    control={
      <Switch
        color="default"
        classes={{
          track: classes.switchTrack,
          switchBase: classes.switchBase,
        }}
        size="small"
        checked={checked}
        onChange={toggleChecked}
      />
    }
    label="Small"
    // classes={{ switchBase: classes.switchBase }}
  />
</FormGroup>

useStyles 对象：-

const useStyles = makeStyles((theme) => ({
    switchTrack: {
        backgroundColor: "#000"
    },
    switchBase: {
        color: "#000",
        "&.Mui-checked": {
            color: "green"
        },
        "&.Mui-checked + .MuiSwitch-track": {
            backgroundColor: "green"
        }
    },
}));

工作沙盒链接：-https://codesandbox.io/s/prod-wave-e9otk