Using withstyles
- Start by importing Checkbox (the checkbox itself) and FormControlLabel (for the name of the checkbox) from Material UI library.
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
- Next, import withstyles to customize the color, specifically using the color red.
import { withStyles } from '@material-ui/core/styles';
import { red } from "@material-ui/core/colors";
- Customize the styling using withstyles as shown below:
const RedCheckbox = withStyles({
root: {
color: red[900],
'&$checked': {
color: red[200],
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
- Insert the customized
Redcheckbox component inside the FormControlLabel element.
<FormControlLabel
control={
<RedCheckbox
checked={state.checkedA}
onChange={handleChange}
name="checkedA"
/>
}
label="Monday"
/>
For a complete code example, check out this Demo.
(Be sure to open the demo.js file)
If you're not satisfied with the default colors offered, you can easily customize the color palette. Refer to this link for more information.
Feel free to leave a comment if you require any assistance or further clarification.
Link to the MUI checkbox component ->
https://v4.mui.com/components/checkboxes/#checkbox