Switch Material UI theme

Question

I'm trying out the Material UI theming but has stubbled upon something I can't figure out.

I have declared two different themes, the only difference between the two is the colors:

const defaultTheme = {
    palette: {
        primary: {
            main: "#039be5"
        },
        secondary: {
            main: "#ff4081"
        }
    },
    props: {
        MuiButtonBase: {
            disableRipple: true
        },
        MuiButton: {
            disableElevation: true,
            variant: "contained"
        },
    }
};

const userTheme = {
    palette: {
        primary: {
            main: "#3fb5b5"
        },
        secondary: {
            main: "#ad976e"
        }
    },
    props: {
        MuiButtonBase: {
            disableRipple: true
        },
        MuiButton: {
            disableElevation: true,
            variant: "contained"
        },
    }
};

If the "userTheme" does not have any values the "defaultTheme" will be used:

const theme = createMuiTheme(isEmpty(userTheme) ? defaultTheme : userTheme);

function isEmpty(obj) {
    for (var key in obj) {
        if (obj.hasOwnProperty(key))
            return false;
    }
    return true;
}

Now this works as expected but when the "userTheme" is beeing used the text of the buttons somehow turns black instead of white which is the Material UI standard text color. This works as expected when using my "defaultTheme".

Example of using the defaultTheme: Default theme with white text

Example of using the userTheme: User theme with black text, why?

question from:https://stackoverflow.com/questions/65952504/switch-material-ui-theme

Answer 1

Waitting for answers