material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

Published 20 hours ago • verified publisher icon mui

Styles not added to shadow DOM when wrapping MUI in a library

Open MartinJaskulla opened this issue 7 months ago • 2 comments

Steps to reproduce

Link to live example: https://6698f74d46bade9e76f1d058--guileless-sorbet-bf347d.netlify.app/

https://github.com/MartinJaskulla/reproduction-library https://github.com/MartinJaskulla/reproduction-library-user

  1. git clone https://github.com/MartinJaskulla/reproduction-library-user
  2. npm i
  3. npm run dev
  4. See the bug: MUI <Button> is unstyled, because emotion style sheets are added to <head> instead of shadow DOM
  5. Comment out Button, and comment in // import {Button} from "@mui/material"; in main.jsx
  6. Bug gone

Current behavior

<Button> looks like a native html <button> inside shadow DOM.

Expected behavior

<Button> should look like a MUI button inside shadow DOM.

Context

I created a component library for my company that wraps MUI and makes some adjustments. Everything works flawlessly.

For a new feature we have to use my library inside shadow DOM meaning the project that is installing my component library is creating a custom element and wants to use the wrapped MUI components from my library inside it. I followed the documentation (https://mui.com/material-ui/customization/shadow-dom/) to do that. Somehow the styles do get added to the <head> instead of the shadow DOM.

I created a new library for my reproduction, in which I just re-export MUI as is (that is the only thing the library is doing): https://github.com/MartinJaskulla/reproduction-library/blob/main/src/main.jsx

export * from "@mui/material";

If I install this library in a new project (https://github.com/MartinJaskulla/reproduction-library-user), then import { Button } from "@mui/material"; adds the styles correctly to the shadow DOM, but import { Button } from "reproduction-library"; adds the styles to the <head> although the code of both buttons should be identical.

To me it looks like MUI only works inside shadow DOM if imported from "@mui/material";.

Your environment

npx @mui/envinfo 
 System:
    OS: macOS 14.5
  Binaries:
    Node: 22.2.0 - /opt/homebrew/bin/node
    npm: 10.7.0 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 126.0.6478.182
    Edge: Not Found
    Safari: 17.5

Search keywords: shadowdom library styles emotion

MartinJaskulla avatar Jul 18 '24 11:07 MartinJaskulla