[system] Add flags for nested CssVarsProvider

[siriwatknp]

Changes

• CssVarsProvider won't generate a new style sheet if the upperTheme.cssVarPrefix and the input theme.cssVarPrefix is the same.
• By default, the nested CssVarsProvider will not create a new react context.
• Added a flag, disableStyleSheetGeneration to always skip the style sheet generation.
• Added a flag, disableNestedContext to force the provider to create its own context.

Here are the use cases:

• Single source of state, multiple themes:

  <CssVarsProvider> // default theme
    ...
    <CssVarsProvider theme={extendTheme({ cssVarPrefix: 'theme2' })}>
    ...
  </CssVarsProvider>

• Single source of state, siblings have the same theme:

   <CssVarsProvider> // default theme
     ...
     <CssVarsProvider theme={extendTheme({ cssVarPrefix: 'theme2' })}>
     
     <CssVarsProvider theme={extendTheme({ cssVarPrefix: 'theme2' })} disableStyleSheetGeneration>
     
     <CssVarsProvider theme={extendTheme({ cssVarPrefix: 'theme2' })} disableStyleSheetGeneration>
     ...
   </CssVarsProvider>

• Separate state, same theme:

   <CssVarsProvider> // default theme
     ...
     <CssVarsProvider
       disableNestedContext
       colorSchemeSelector="#demo"
       colorSchemeNode={typeof document !== 'undefined' ? document.getElementById('demo') : undefined}
     >
     
   </CssVarsProvider>

• Separate state, different theme:

   <CssVarsProvider> // default theme
     ...
     <CssVarsProvider
       theme={extendTheme({ cssVarPrefix: 'demo' })}
       modeStorageKey="demo-mode"
       defaultMode="system"
       disableNestedContext
     >
     
   </CssVarsProvider>

---

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

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35277--material-ui.netlify.app/

@material-ui/core: parsed: +0.06% , gzip: +0.09%
@material-ui/system: parsed: +0.45% , gzip: +0.55%
@mui/joy: parsed: +0.09% , gzip: +0.19%

Details of bundle changes

Generated by 🚫 dangerJS against bcdc2ff

[mnajdova]

Some nits added, but overall this direction is much better than having a new nested provider component 👍 I would recommend in the PR description to add examples of a real use-cases where each if the scenarios would be useful :)

[mnajdova]

Could we create the theme outside of the render function.

[mnajdova]

Same here

[ZeeshanTamboli]

@siriwatknp Just pointing out to issue #35236 if it helps.