Description
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:
- 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