Material-ui: Overriding Checkbox Theme not working

[RoiEXLab]

So I have a project using v3.6.2 and I'm trying to move things into the theme as much as possible instead of having helper components for each style.
I noticed that for checkboxes this doesn't really work as expected:

Old custom component:

const styles = {
  root: {
    color: '#custom color',
    '&$checked': {
      color: '#custom color'
    }
  },
  checked: {}
};

Simply putting those styles into the theme doesn't work, the checkboxes still have the default pink colour.
However I checked the css and somehow there seem to be 2 independent checkbox styles that would both apply simultaneously.
So as a workaround the infamous !important can be added so this works:

MuiCheckbox: {
  colorSecondary: {
    color: '# custom color !important'
  },
  checked: {
    color: '#custom color !important'
  }
}

I don't think this is intended to be the way to do it, so I appreciate if "overriding the style" would actually override it.

[oliviertassinari]

@RoiEXLab The correct solution is:

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

[RoiEXLab]

But why was it working when using withstyles directly?

Also why does a checked variant exist if it doesn't have anything to do with the actual checked state?

[oliviertassinari]

@RoiEXLab withStyles injects new CSS but using the theme overrides the CSS before it's injected. It's fundamentally different. The only different in your example is how we increase the specificity with the $ruleName syntax.

What do you mean by doesn't have anything to do with the actual checked state? They are synchronized.

[RoiEXLab]

Sorry, I should've clarified:
I find it very unintuitive that

checked: {
  // CSS Here
}

seems to be the same as

colorSecondary: {
  '&$checked': {
    // CSS Here
  }
}

at a first glance.

I must admit I'm not really sure what exactly the former case is being supposed to be used for.

[oliviertassinari]

@RoiEXLab The only difference is the output specificity. The first one generates a .jssx selector when the second one generates a .jssx.jssy selector, because it's using the $ruleName syntax.

[RoiEXLab]

Is this documented somewhere? I didn't stumple upon any when migrating a project from 0.20.1. I haven't really searched for it, but I have seen large portions of it.

The $rule syntax in my code example is taken 1:1 from the checkbox example on your website if I recall correctly.

But in any case: Thanks for your help. My issue is resolved although I still find the 2 possibilities confusing, because the can be set independent of each other, possibly overriding each other.

[oliviertassinari]

@RoiEXLab We could warn about it, yes. I'm working on the documentation side of the issue.

[RoiEXLab]

Thanks, I really appreciate it 👍

[oliviertassinari]

13919

[janithmalshan]

@oliviertassinari

MuiCheckbox Theme override works only with;

@import Checkbox from "@material-ui/core/Checkbox/Checkbox";

When using;

@import Checkbox from "@material-ui/core/Checkbox";

it will override by MuiIconButton-root

[oliviertassinari]

import Checkbox from "@material-ui/core/Checkbox/Checkbox";

@janithmalshan This import is not considered public. We discourage it. It might break in any future minor version upgrade.

[janithmalshan]

@oliviertassinari Then what can be the reason for that MuiCheckbox Theme overrides not working?
**I tried to override its padding.

[oliviertassinari]

@janithmalshan You have a module duplication issue in your bundle. It likely comes from a cjs and esm version duplication.

[maksimgm]

@oliviertassinari The code that you shared worked:

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

But if I dont add the colorSecondary, shouldn't it default to what I define in my App.tsx i.e. my primary color?

this.theme = createMuiTheme({
    palette: {
      primary: {
        main: '#00a3d8',
      },
    },

[jonathan-stone]

@maksimgm You probably already figured this out, but adding for posterity:

Checkbox uses colorSecondary by default. Setting colorPrimary won't affect the color of a checkbox, unless you set <Checkbox color="primary">