I wold like to give the CheckBoxes of MUI a custom color when they are selected.
Examples: Default CheckBox vs Colored CheckBox
I know for a specific CheckBox this can be manipulated by using the color attribute of the component like this:
<Checkbox value="remember" color="secondary"/>
But I want to apply the style globally via a custom theme. I tried several approaches, but for the CheckBox component the theme doesnt seem to be applied. I have something like this in my mind which does work for other components like the button:
import { createTheme } from '@mui/material/styles';
const themeOptions = {
components: {
MuiButton: {
styleOverrides: {
contained: {
background: '#363636',
'&:hover': {
background: '#FF6600',
},
},
},
},
MuiCheckbox: {
styleOverrides: {
checked: {
color: '#FF6600',
},
},
},
},
};
const theme = createTheme(themeOptions);
What do I miss? Thanks in advance
Aucun commentaire:
Enregistrer un commentaire