MUI Theme: Components default properties not applied if React is rendered in shadow DOM

[adiXSG]

Steps to reproduce

I created a react application which is rendered within a shadow DOM. I followed the documentation for Mui with shadow DOM.
The same logic was working with Mui V4 using React 18. Now with React 19 and Mui V6, it doesn't work anymore.

Steps:

1. Open this link to live example: CodeSandbox

Current behavior

Default properties like fullWith or variant for MuiButton or container for components using portal were not applied to the components and therefore are not working correctly as long as I not provide the properties to each component instance explicitly.

Expected behavior

The components use the default properties defined in theme

Context

I build complex formular applications with vite, which will be embedded in an other 3rd-party application. Therefore it is essential to have the shadow DOM. The provided example is just a example to isolate the issue.

The workaround for this issue is, to set the default properties explicitly on each instance, what is not really a solution for a larger application.

Your environment

I used Firefox 136.0.2 and Chrome for dev and tests.

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.3.0 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Chrome: 134.0.6998.177
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react: 11.14.0 => 11.14.0
    @emotion/styled: 11.14.0 => 11.14.0
    @mui/core-downloads-tracker:  6.4.9
    @mui/material: 6.4.8 => 6.4.8
    @mui/types:  7.2.24
    @mui/utils:  6.4.8
    @types/react: 19.0.0 => 19.0.0
    react: ^19.0.0 => 19.0.0
    react-dom: ^19.0.0 => 19.0.0
    typescript:  4.9.5

Search keywords: shadow DOM theme Emotion

[siriwatknp]

The import is wrong, do this instead:

-import { CacheProvider, ThemeProvider } from "@emotion/react";
-import createTheme from "@mui/material/styles/createTheme";
+import { CacheProvider } from "@emotion/react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";

This take me almost an hour to find the root cause. If we make the ThemeProvider required, we can improve this DX by throwing early when the context is not found.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[adiXSG]

@siriwatknp thanks for your reply and a huge apology for my mistake. I don't know where the wrong import came from.... and although I looked at everything very carefully, I didn't notice this mistake. In the end though, I think it would be useful to have documentation (Documentation for Mui with shadow DOM.), which also contains the imports in the code examples and probably prevents this mistake.