Deeply merging enhancement

Deeply merging: theme objects are merged and if a key is present in more than one object, the values for each objects are concatenated.

While this does offer the most flexibility, I think it can be improved to override styles set by parent themes/defaults.

<ThemeProvider theme={global}>
    <ThemeProvider theme={specialCase}>
        <App />
    </ThemeProvider>
</ThemeProvider>

Take this example. I think it would be cool to see specific nested styles defined in global overwritten if also defined by specialCase.

@javivelasco If I am understanding correctly, this might be pending work on postcss-apply?

Post Edit:

Note current work arounds are to use selectors that are more specific and/or override using !important.

[mpodlasin]

I would actually be super interested in merging themes in ThemeProvider if there was already ThemeProvider higher in component tree. We have a multi-module application where you would define styles in app root (first ThemeProvider) and then modify them on per module basis.

Would you be ok with such change? I am willing to make a pr, if needed.

[javivelasco]

In any case it’s better if you check the priority of the selector in the browser and boost your own by replicating the same plus a classname for example. I have to revisit react toolbox styles to try to reduce specific selectors as much as possible.

Anyway apply will solve some issues soon 😃