Material-UI 中依赖道具的切换颜色

Question

以下代码改编自用于自定义的SwitchMaterial-UI 文档，允许将开关颜色设置为蓝色：import React from 'react'import Switch from '@material-ui/core/Switch'import {withStyles} from '@material-ui/core/styles'const ColoredSwitch = withStyles({  switchBase: {    '&$checked': {      color: 'blue',    },  },  checked: {},  track: {},})(Switch)但是当试图调整它以便可以通过组件属性设置颜色时，它就是行不通。以下代码（仅是伪动态的）事件呈现为默认开关：const ColoredSwitch = withStyles({  switchBase: {    '&$checked': {      color: props => 'blue',    },  },  checked: {},  track: {},})(Switch)我想我一定做错了什么，但无法弄清楚是什么。

Answer 1

const ColoredSwitch = withStyles({

  switchBase: {

    "&.Mui-checked": {

      color: (props) => props.customchecked

    }

  },

  checked: {},

  track: {}

})((props) => {

  const { classes, ...other } = props;

  return <Switch classes={{ switchBase: classes.switchBase }} {...other} />;

});

您也可以使用makeStyles

const useStyles = makeStyles({

  switchBaseChecked: {

    "&.Mui-checked": {

      color: (props) => props.color

    }

  }

});

export default function Switches() {

  const props = { color: "green" };

  const classes = useStyles(props);

  return (

    <Switch

      color="primary"

      classes={{

        checked: classes.switchBaseChecked

      }}

    />

  );

}