I need to change my little black icon in checkbox to another color!
This is my code.
Material ui theme:
export const colors: IAppColors = {
darkTheme: {
primary: {
placeholder: "#607589",
bright: "#37AFE2",
light: "#276899",
grey: "#242F3D",
main: "#17212B",
dark: "#0E1621",
},
secondary: {
grey: "rgba(255,255,255, .08)",
light: "rgba(255,255,255, .1)",
main: "#fff",
dark: "",
},
},
};
Mui theme checkbox styles:
MuiCheckbox: {
styleOverrides: {
root: {
transition: "all .2s ease",
"&.Mui-checked": {
".MuiSvgIcon-root": {
color: colors.darkTheme.primary.bright,
},
},
".MuiSvgIcon-root": {
fontSize: "2.2rem",
},
".MuiTouchRipple-root": {
opacity: "0.3",
},
},
},
},
So, how do i change this little black icon color to white
This little icon color inherits from my mui theme palette main color.
I tried to change my main color in my theme color palette to white, and it worked for me, but, i have a black theme, so i need to change only this little icon color, not an app main color.
you can change Icon and checkedIcon prop in the Checkbox component
<Checkbox
color="primary"
icon={props.disabled ? <CheckboxDisabledIcon /> : <CheckboxIcon />}
checkedIcon={indeterminate ? <CheckboxIndeterminateIcon /> : <CheckboxActiveIcon />}
/>
like this