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} />;});您也可以使用makeStylesconst 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      }}    />  );}