Merge objects and subobjects in JavaScript (without overwriting subobjects completely)

Question

Context: I am building a web app with react und the material-ui and want a LightTheme and a DarkTheme that share "basic" properties. So I created a BaseTheme and then merged that with the specific values of the light/dark-theme using the ...spread-operator.

BaseTheme.js

const BaseTheme = {
    props: {
        MuiButton: {
            variant: "outlined",
            color: "primary",
        },
        MuiTextField: {
        variant: "outlined",
            color: "primary",
        }
    },
    palette: {
        primary: {
            main: '#76e3b8',
        }
    }
}

DarkTheme.js

const DarkTheme = {
    palette: {
        type: "dark",
    },
    ...BaseTheme,
}

LightTheme.js looks just like DarkTheme.js

However the BaseTheme completely overrides the palette subobject. Do you have any idea how I could fix this? Manually coding scenarios is not really an option as the themes will get much more complex so it would be really intricate.

Answer 1

Just switch the order:

const DarkTheme = {
    ...BaseTheme,
    palette: {
        type: "dark",
    },
}

or, if you want to merge palette with the original:

const DarkTheme = {
    ...BaseTheme,
    palette: {
        ...BaseTheme.palette,
        type: "dark",
    },
}

const BaseTheme = {
    props: {
        MuiButton: {
            variant: "outlined",
            color: "primary",
        },
        MuiTextField: {
        variant: "outlined",
            color: "primary",
        }
    },
    palette: {
        primary: {
            main: '#76e3b8',
        }
    }
}

let DarkTheme = {
    ...BaseTheme,
    palette: {
        type: "dark",
    },
}

console.log(DarkTheme);

DarkTheme = {
    ...BaseTheme,
    palette: {
        ...BaseTheme.palette,
        type: "dark",
    },
}

console.log(DarkTheme);