Nested theme not working

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I have a main Theme and a secondary Theme that I need to use it only on few pages, so I followed the nested themes pattern as described in the docs, wrapping only few components into the secondary theme, but only the primary theme is applied

Expected Behavior 🤔

I expect the secondary theme to be applied where necessary

Steps to Reproduce 🕹

https://codesandbox.io/s/friendly-shaw-kpcfe?file=/src/Demo.js

Steps:

1. open the live example
2. the theme is light instead of dark

Context 🔦

I’d like my main app to use a light/standard theme, while the landing page should always use a dark theme, I use react-router for the routing

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	v16.13.1
Browser	Chrome 86
TypeScript	v3.9
etc.

[oliviertassinari]

    <ThemeProvider theme={theme}>
      <Container>
        <Paper>
          Foo
          <ThemeProvider theme={landingPageTheme}>
            <Paper>Bar</Paper>
          </ThemeProvider>
        </Paper>
      </Container>
    </ThemeProvider>

https://codesandbox.io/s/goofy-star-xrjc9?file=/src/Demo.js:567-814

[lucafaggianelli]

thank you @oliviertassinari , I managed to have a nested theme!