Theme propagation with @Mui externals and @emotion styled

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The default theme is being applied when I Client-Side-Render the application - buttons are Blue instead of Orange (custom theme).

The wrong context/cache appears to be on the component and I have no idea why it is not being superseded by my theme

Server-Side-Rendering works Perfectly. It renders the theme and creates buttons and other @mui components with my custom theme:

Client-side hydration will rewrite the CSS and use the default theme from @mui - which is not what I want

Expected behavior 🤔

Prior to moving to @mui 5 this used to work, the theme would propagate and this is what I would like to achieve again.

Steps to reproduce 🕹

Steps:

I cannot reproduce this in a JSFiddle, but I can provide a link to where this code is executing and I can provide access to the source to help diagnose the issue.

1. All code has been to be externalised, and the page is built from JSON configuration (like a CMS)

The top section represents all the core libraries that are used to run the Client-Side-Rendering engine The bottom section are the individual “widgets” that are combined to represent a page, after being placed within a template structure. The very last item loaded is the React Client

The client pulls a JSON configuration file and when this is read, it will pull the components that require to be rendered from the “window” and create/render the react components. It passes the global Store (Redux) into the widget so they can onboard shared state and update other widgets.

Use standard @mui components within your externalised widget and ask for it to be styled against the theme

Theme works in SSR, does not work in CSR.

Emotion Cache on component in CSR points to the wrong context

Context 🔦

I am at the end of my rope and I never ask for help but I am stuck. This framework is to be the production framework for a headless Product that we are building. I need help identifying why the theme is broken - everything else works as expected and I love the @mui framework.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 11.5.2
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.12.1 - /opt/local/bin/yarn
    npm: 8.1.4 - ~/Documents/projects/SKU/skuvantage-core-ux/UserExperience/WidgetBuilder/node_modules/.bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Not Found
    Firefox: 93.0
    Safari: 14.1.2
  npmPackages:
    @emotion/react: ^11.5.0 => 11.5.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/base:  5.0.0-alpha.55 
    @mui/docs: ^5.1.1 => 5.1.1 
    @mui/icons-material: ^5.0.5 => 5.0.5 
    @mui/lab: ^5.0.0-alpha.55 => 5.0.0-alpha.55 
    @mui/material: ^5.1.1 => 5.1.1 
    @mui/private-theming:  5.1.1 
    @mui/styled-engine:  5.1.1 
    @mui/styles: ^5.1.1 => 5.1.1 
    @mui/system:  5.1.1 
    @mui/types:  7.1.0 
    @mui/utils: ^5.1.1 => 5.1.1 
    @mui/x-data-grid-pro: ^5.0.1 => 5.0.1 
    @mui/x-license-pro: ^5.0.1 => 5.0.1 
    @types/react:  16.9.34 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^4.4.1 => 4.4.1 

All browsers!

[alistairskuvantage]

@mnajdova I have raised a pull request for this: https://github.com/mui-org/material-ui/pull/29980

[mnajdova]

@alistairskuvantage would you mind creating a PR with the proposed changes? We can take a look.