closes #45544

Root cause

Nested ThemeProvider with non-cssvars theme throws an error when the upper theme is css vars.

The use case is the MUI docs where css vars theme comes from the branding theme and nested theme comes from customization demo.

<ThemeProvider theme={cssVarsTheme}>
  <ThemeProvider theme={nonCssVarsTheme}> // the theme passed to context gets `vars` from the above theme
    // if the component access to the new color added to `nonCssVarsTheme` but not in `cssVarsTheme`,
    // the error occurs.
    <Button color="ochre">

For full details: #45544 (comment)

Solution

Set vars: null to the theme when the theme input does not have vars, so that it does not inherit vars from the upper theme.

• I have followed (at least) the PR section of the contributing guide.