[material-ui] Support nested theme when upper theme is CSS vars theme

[siriwatknp]

Cherry pick from #45545 and #45368

Need this PR to release on v5 because MUI X docs depends on this version. To unblock #45386 so that the docs (both core and x) can migrate to CSS variables to fix the dark mode flicker issue.

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

[mui-bot]

Netlify deploy preview

https://deploy-preview-45604--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against a96e725

[siriwatknp]

Confirmed that it works with MUI X repo in combination with #45386

[JP250552]

I think there may be a breaking change with this.

Previously if you passed an empty object to the theme provider ({} rather than createTheme()), it would still create a full theme.

Now with this change, the theme looks like this:

{ vars: null }

[timmevandermeer]

I think there may be a breaking change with this.

Previously if you passed an empty object to the theme provider ({} rather than createTheme()), it would still create a full theme.

Now with this change, the theme looks like this:

{ vars: null }

I did experience a breaking change due to this release indeed (bisected to narrow it down to 5.17.0). In my case, setting my theme <ThemeProvider theme={theme}> which passed theme created by createTheme somehow caused React to enter an infinite render loop. I could only mitigate by changing to <ThemeProvider theme={() => theme}> to avoid the changed behavior from this PR.