The disabled unchecked checkbox appears too subtle to me, and I would like to enhance it by giving it a grey background and changing the cursor style to not-allowed.
I've been trying to implement these styles on the checkbox using the makeStyles, but so far without success. Here's my current code snippet:
const useStyles = makeStyles((theme) => ({
disabledCheckbox: {
cursor: 'not-allowed',
color: 'grey',
backgroundColor: 'grey',
},
}));
// ...
const App = () => {
const classes = useStyles();
return (
<div>
Disabled:
<Checkbox
disabled={true}
name="Disabled checkbox"
classes={{ disabled: classes.disabledCheckbox }}
/>
</div>
);
};
Unfortunately, my attempts have not resulted in any visible changes, and the appearance of the disabled checkbox remains unchanged. You can compare a functional and non-functional version in this demo app.
What could be causing this issue? How can I successfully modify the background color of an unselected MUI disabled checkbox?