How can I customize the color of a Checkbox in Material UI?

Question

I am using Material UI 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?

Answer 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'}}
/>

Answer 2

Could be two approaches.

1. "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.

2. 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.

Answer 3

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;
}

Answer 4

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} />

Answer 5

You could use material ui theme.

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

got it from here

Answer 6

MUI 5 Theme:

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

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

Answer 7

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'}

Answer 8

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>

Answer 9

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

Related Answer

• How to add custom MUI palette colors

Answer 10

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} />
}

Answer 11

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.

Answer 12

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

Answer 13

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>}
              />

Answer 14

const theme = createTheme({
    components: {
        MuiCheckbox: {
            defaultProps: {
                // disableRipple: true,
            }, 
            styleOverrides: {
                root: {
                    color: 'black',
                    '&.Mui-checked': {
                        color: 'black', 
                    },
                }
            }
        }
    }
})