In my application, I have a FormControlLabel and Switch component. When the Switch is disabled, the label in FormControlLabel and the button in Switch turn gray. However, I want to maintain the color of both the label (black) and the button (red).
To test this, I wrote the following style:
If you'd like to see the full code, click here: https://codesandbox.io/s/condescending-cherry-f0q5h?file=/src/App.js
const useStyles = makeStyles({
disabled: { color: "red" }
});
<FormControlLabel classes={{disabled: classes.disabled}}/>
<Switch classes={{disabled: classes.disabled}}/>
Even though I expected the disabled class to be applied (making the label and button red) when the Switch is disabled, it did not work as intended. What steps should I take to achieve this outcome?
Thank you!