我正在尝试重载 MuiSwitch-track 类开关,但它不起作用。基本上我想重载特定开关。
我尝试使用
"@global": {
".MuiSwitch-track": {
backgroundColor: "#d80c0a"
}
但它使所有开关超载。
有什么办法可以对单个开关执行相同的操作吗?
<Switch
style={
this.state.switchChecked
? { color: "rgb(65, 207, 65)" }
: { color: "#d80c0a" }
}
size="small"
checked={switchChecked}
onClick={this.handleSwitchState}
value="userSwitch"
/>
下面的示例展示了如何自定义 Switch 的轨道颜色。这是基于用于默认样式 https://github.com/mui-org/material-ui/blob/v4.9.5/packages/material-ui/src/Switch/Switch.js#L94.
import React from "react";
import Switch from "@material-ui/core/Switch";
import { withStyles } from "@material-ui/core/styles";
const CustomSwitch = withStyles({
colorSecondary: {
"&.Mui-checked + .MuiSwitch-track": {
backgroundColor: "purple"
}
},
track: {
backgroundColor: "blue"
}
})(Switch);
export default function Switches() {
const [state, setState] = React.useState({
checkedA: true,
checkedB: true
});
const handleChange = name => event => {
setState({ ...state, [name]: event.target.checked });
};
return (
<div>
<Switch
checked={state.checkedA}
onChange={handleChange("checkedA")}
value="checkedA"
inputProps={{ "aria-label": "secondary checkbox" }}
/>
<CustomSwitch
checked={state.checkedA}
onChange={handleChange("checkedA")}
value="checkedA"
inputProps={{ "aria-label": "secondary checkbox" }}
/>
</div>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)