'How can I customize the color of a Checkbox in MUI?

I am using MUI in my project, and I have a Checkbox within a div with a black background. But it doesn't look good because the Checkbox is black too. How can I change the color of the Checkbox from black to another color?

reactjs material-ui

Solution 1:^[1]

You need to use the iconStyle, but since the checkbox icon is an SVG image, you need to set the color using fill instead of color:

https://jsfiddle.net/27Lmaz48/1/

<Checkbox label='My checkbox' 
  labelStyle={{color: 'white'}}
  iconStyle={{fill: 'white'}}
/>

Solution 2:^[2]

This is how you do it:

 <FormControlLabel  
                control={
                  <Checkbox
                    checked={cryon}
                    onChange={this.handleChange('cryon')}
                    style ={{
                      color: "#00e676",
                    }}
                    value="cryon"
                  />
                }
                label={<Typography variant="h6" style={{ color: '#2979ff' }}>Work</Typography>}
              />

Solution 3:^[3]

It's an old question, but for those who are using material 1.2.

The iconStyle is not working for me.

However, I achieved this by overwriting the existing theme and wrap the 'Checkbox' component to a new one.

import { withStyles } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';



const checkBoxStyles = theme => ({
    root: {
      '&$checked': {
        color: '#3D70B2',
      },
    },
    checked: {},
   })

const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);

Now you can use the "CustomCheckbox" component in render function.

And when it's checked , the color should be the one you assigned.

Solution 4:^[4]

For me it is solve by adding root and checked classed

const styles = () => ({
  root: {
    "&$checked": {
      color: "rgba(0, 0, 0, 0.54)"
    }
  },
  checked: {}
})

and passing it inside classes of checkbox

<Checkbox
          checked={checked}
          classes={{
            root: classes.root,
            checked: classes.checked
          }}
          onChange={handleCheckBox}
        />

hope this will help others

Solution 5:^[5]

You could use material ui theme.

const theme = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      colorSecondary: {
        color: '#custom color',
        '&$checked': {
          color: '#custom color',
        },
      },
    },
  },
});

got it from here

Solution 6:^[6]

Could be two approaches.

"local"

CheckBox has props labelStyle and iconStyle. I suppose you can start with adjusting them:

<Checkbox
  label="Custom icon"
  labelStyle={{color: 'white'}}
  iconStyle={{color: 'white'}}
/>

I'm not sure if it's enough so may be you need to play with other "Style" props of Checkbox. Checkout everything that has "style" in name.

Create theme

you can set some theme setting which will only affect the checkbox:

you can use storybook-addon-material-ui demo page to create your theme and download it.

Solution 7:^[7]

For me i just needed the table header checkbox changed, this worked for me

.thsvg svg{
  fill: white !important;
}


<TableHeader
   className="thsvg"
    displaySelectAll={true}
    adjustForCheckbox={true}
    enableSelectAll={true}>
  <TableRow>     
    <TableHeaderColumn>Name</TableHeaderColumn>
  </TableRow>
</TableHeader>

Solution 8:^[8]

the checkBox has attribute named color and it can have value of default or primary or secondary like :

 <Checkbox
   onChange={doSth}
   value="checkedIncomplete"
   color="primary"
  />

you can change primary and secondary colors in simple way by over writing their classes Css which for primary is : .MuiCheckbox-colorPrimary and for secondary is : .MuiCheckbox-colorSecondary

so you can edit in Css : .MuiCheckbox-colorPrimary { color : 'yourColor'}

Solution 9:^[9]

This worked for me on material-ui 4.1. Define color property on with value ="primary" on Checkbox

<Checkbox color="primary"...>

Overwrite material-ui's styling wrt the primary color. Add this entry into a css file which gets imported into the javascript code that renders the Checkbox.

.MuiCheckbox-colorPrimary.Mui-checked {
color: #e82997 !important;
}

Solution 10:^[10]

You can assign a custom Icon for both check and unchecked condition then style the icons of your checkbox for example: <Checkbox checkedIcon={<CustomIcon style={{color:'red'}}/>} icon={<CustomIcon/>} inputProps={{ 'aria-label': 'decorative checkbox' }} {...props} />

Solution 11:^[11]

For any person coming later for an answer,
if the labelStyle and iconStyle do not work for you
and you want to be able to change the color later try the following thing:

const useStyles = makeStyles<Theme, {color: string}, "root">({
    root: {
        color: (props: {color: string}) => props.color,
    },
})

export default function ColoredCheckbox() {
     const styles = useStyles({color: "#whatevercoloryouwant"})
     return <Checkbox color="default" className={styles.root} />
}

Solution 12:^[12]

In MUI v5, There are 2 preferable ways to change the Checkbox color:

`sx` prop

This is useful for one-off style, quickly to set up but only apply to a specific Checkbox:

import Checkbox, { checkboxClasses } from "@mui/material/Checkbox";

<Checkbox
  {...props}
  sx={{
    [`&, &.${checkboxClasses.checked}`]: {
      color: 'magenta',
    },
  }}
/>

`color` prop

You can see this answer for more detail. Basically the color prop of some components (e.g. Button, Checkbox, Radio,...) must be one of the colors from the Palette object, which can be extended to your liking:

import { pink, yellow } from "@mui/material/colors";
import Checkbox, { checkboxClasses } from "@mui/material/Checkbox";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const { palette } = createTheme();
const theme = createTheme({
  palette: {
    pinky: palette.augmentColor({ color: pink }),
    summer: palette.augmentColor({ color: yellow })
  }
});

<ThemeProvider theme={theme}>
  {/* pre-defined color */}
  <Checkbox />
  <Checkbox color="secondary" />
  <Checkbox color="success" />
  <Checkbox color="default" />
  {/* custom color */}
  <Checkbox color="pinky" />
  <Checkbox color="summer" />
  <Checkbox
</ThemeProvider>

Live Demo

Solution 13:^[13]

MUI 5 Theme:

import { checkboxClasses } from '@mui/material/Checkbox';

export const muiTheme = createTheme({
    components: {
        MuiCheckbox: {
            styleOverrides: {
                root: {
                    color: 'blue',
                    [`&.${checkboxClasses.checked}`]: {
                        color: 'blue',
                    },
                },
            },
        },
    },
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jeff McCloud
Solution 2	Hitesh Sahu
Solution 3	kiranvj
Solution 4	Ahmed Khan
Solution 5	Dennis Gloss
Solution 6	Oleg Pro
Solution 7	user8682962
Solution 8	Shayan Moghadam
Solution 9	Binita Bharati
Solution 10	Sarang Sami
Solution 11	Vlad - Alexandru Iancu
Solution 12
Solution 13	Robin Wieruch

'How can I customize the color of a Checkbox in MUI?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

sx prop

color prop