Skip to content

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

Closed
@adiXSG

Description

@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

Metadata

Metadata

Assignees

Labels

customization: themeCentered around the theming featuressupport: questionCommunity support but can be turned into an improvement

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions