'Can't override mui checkbox or radio buttons

i have tried everything to override mui checkbox and radio from theme with no luck

components: {
...
MuiCheckbox: {
      styleOverrides: {
        root: {
          color: pallette.lightBlack,
        },
        colorSecondary: {
          '&$checked': {
            color: pallette.lightBlack,
          },
        },
      },
    },
    MuiRadio: {
      styleOverrides: {
        root: {
          color: pallette.lightBlack,
        },
        colorSecondary: {
          '&$checked': {
            color: pallette.lightBlack,
          },
        },
      },
    },

So far not able to make that work only from sx prop like this

<Radio
                  sx={{
                    '&, &.Mui-checked': {
                      color: pallette.lightBlack,
                    },
                  }}
                />

reactjs material-ui

Solution 1:^[1]

You might misspelled palette. Try changing pallette to palette.

Solution 2:^[2]

I was dealing with this issue too using MUI v5.8 In order to override the styled for the radio both checked and unchecked, something like this worked for me.

MuiRadio: {
  styleOverrides: {
    root: {
      color: palette.secondary,
      "&.Mui-checked": {
        color: palette.secondary,
      }
    }
  }
}

The & allows you to select the Mui-checked class. This can be used in many places when overriding the styles. Check the assigned classes for the components your are looking to override.

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	Tolunay Özdemir
Solution 2	LightWrath

'Can't override mui checkbox or radio buttons

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]