score:0

using withstyles

  1. import checkbox (checkbox itself) and formcontrollabel (for name of the checkbox) from material ui
import checkbox from "@material-ui/core/checkbox";
import formcontrollabel from "@material-ui/core/formcontrollabel";
  1. import withstyles to customize the color and the color red
import { withstyles } from '@material-ui/core/styles';
import { red } from "@material-ui/core/colors";
  1. customize using withstyles
const redcheckbox = withstyles({
  root: {
    color: red[900],
    '&$checked': {
      color: red[200],
    },
  },
  checked: {},
})((props) => <checkbox color="default" {...props} />);
  1. add redcheckbox (or the name that you assigned) inside the formcontrollabel
<formcontrollabel
      control={
        <redcheckbox
          checked={state.checkeda}
          onchange={handlechange}
          name="checkeda"
        />
      }
      label="monday"
 />

follow this demo for the complete code. (open the demo.js file)

if you don't like the color they offer, you can also customize their color palette. to do that, please refer this link

feel free to comment if you need help.

link to the mui checkbox component -> https://v4.mui.com/components/checkboxes/#checkbox


Related Query

More Query from same tag