If you want to personalize the color scheme, you'll need to utilize FormControlLabel in place of Switch, and then specify the desired colors within color, "&$checked", and
"&$checked + $track"
.
import React from "react";
import Switch from "@material-ui/core/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { withStyles } from "@material-ui/core/styles";
import { yellow } from "@material-ui/core/colors";
const PurpleSwitch = withStyles ({
switchBase: {
color: yellow[300],
"&$checked": {
color: yellow[500]
},
"&$checked + $track": {
backgroundColor: yellow[500]
}
},
checked: {},
track: {}
})(Switch);
class App extends React.Component {
state = {
switchChecked: false
};
handleSwitchState = () => {
this.setState((prevState) => {
return { switchChecked: !prevState.switchChecked };
});
};
render() {
const { switchChecked } = this.state;
return (
<FormControlLabel
control={
<PurpleSwitch
checked={switchChecked}
onChange={this.handleSwitchState}
name="switchChecked"
/>
}
label="Yellow color"
/>
);
}
}
export default App;