dimanche 24 avril 2022

How to globally change default color of checked MUI CheckBox

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