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?

score 48 · Answer 1 · answered Oct 11 '18 at 18:41

48

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

answered Oct 11 '18 at 18:41

Hitesh Sahu

41,955
17
205
154

4

I like this solution since it's simple to apply and effects both checked and unchecked colors. Works with material-ui 4.8.0 – Christiaan Westerbeek Jan 03 '20 at 10:02

score 40 · Accepted Answer · answered Dec 27 '16 at 05:21

40

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

answered Dec 27 '16 at 05:21

Jeff McCloud

5,777
1
19
21

1

Can you do a hex color instead of a named color? – airowe Jan 23 '18 at 22:10
2

If there is one thing I can blame material-ui for is their lack of examples on their website .. It is full of working examples, but they never ever show the original code .. – Arthur Attout Mar 06 '18 at 08:44
7

which version of material-ui using ? – Kushal Jain Jun 28 '18 at 15:03
4

I think this answer is outdated for Material UI 4.11.3 – Thibault Walterspieler May 10 '21 at 08:17

score 25 · Answer 3 · edited Sep 06 '19 at 05:03

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.

score 8 · Answer 4 · answered Apr 22 '21 at 14:48

8

You could use material ui theme.

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

got it from here

answered Apr 22 '21 at 14:48

Dennis Gloss

2,307
4
21
27

1

This is great! I added it for `colorPrimary` for my use case. – coderpc Sep 17 '21 at 20:05

NearHuscarl · Answer 5 · 2021-11-05T15:49:15.027

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

this should be the answer in 2023. this code is piece of chocolate . — Ali Bayat Mokhtari, Sep 02 '23 at 12:33

score 6 · Answer 6 · answered Mar 05 '20 at 04:56

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

score 4 · Answer 7 · answered Dec 26 '16 at 16:13

4

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.

answered Dec 26 '16 at 16:13

Oleg Pro

2,323
1
15
23

1

Thank you @Oleg. I tried 'inputStyle','iconStyle','labelStyle' and 'style'. 'labelStyle' does change the color of label text, but none of them changes the color of checkbox. Here is the [test jsfiddle](https://jsfiddle.net/qm5r6Lfg/2/). I think a 'local' solution is what I need, because I want keep my other checkboxes using the default style. – kellyxiepei Dec 27 '16 at 02:08
1

Hey Oleg, thank you for this. I've been looking all over the internet for the properties to each element in MaterialUI to design my themes and I can't seem to find a complete doc. The material ui website doesn't have this. I've collected some for buttons and toggles, etc from different places. Is there a place I can get the full list of properties for all elements, including how to setup custom ones? Thanks – LOTUSMS Dec 22 '17 at 16:37

score 4 · Answer 8 · answered Sep 27 '17 at 12:25

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>

score 4 · Answer 9 · answered Dec 14 '19 at 14:10

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

score 2 · Answer 10 · answered Oct 13 '20 at 17:59

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

score 2 · Answer 11 · answered Mar 11 '22 at 20:40

MUI 5 Theme:

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

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

score 1 · Answer 12 · answered Dec 13 '20 at 07:48

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

score 1 · Answer 13 · answered Mar 23 '21 at 23:25

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

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

13 Answers13

sx prop

color prop

Live Demo

Related Answer

`sx` prop

`color` prop