react-material-ui withStyle 道具为空

Question

我想控制切换到道具的背景颜色。但是 withStyles 的 props 是空的。

import Switch from '@material-ui/core/Switch';
import {withStyles, Theme, createStyles} from '@material-ui/core/styles';
import React from 'react';
import {PropsType} from "./propsType";

const AntSwitch = withStyles(({palette, props, ...other})=>{
    console.log('withStyles', props) // here is empty
    return ({
        switchBase: {
            '&$checked': {
                '& + $track': {
                    opacity: 1,
                    backgroundColor: (props as PropsType.Switch).activeColor ?? palette.primary.main,
                    borderColor: palette.primary.main,
                },
            },
        }
    })
})(Switch);

export default function TPSwitch(props: PropsType.Switch) {
    const {label, ...other} = props;
    console.log('other', props)
    return (
        <AntSwitch {...other} />
    )
};

在控制台中打印

other {label: "on", activeColor: "#E74060"}
TPSwitch.tsx:8 withStyles {}

Answer 1

withStyles 不将props 视为its arguments 之一

这是您可以访问props 的方式。为了清楚起见，我简化了您的示例。

const AntSwitch = withStyles(({ palette }) => ({
  root: {
    backgroundColor: (props) => console.log(palette, props) || "hotpink"
  }
}))(Switch);