Not able to load mantine css inside iframe #598

318097 · 2021-12-30T08:31:47Z

318097
Dec 30, 2021

I really love the @mantine/core package. I have built the entire side project and now have to load that in an iframe.
I achieved this using react-frame-component and the JS loads fine, inserted the local project's CSS in the iframe using mini-css-extract-plugin but not able to get mantine core components CSS.
Without Iframe also, the CSS seems to be imported from <style data-jss="" data-meta="Unthemed"></style>.

How to get the hosted CSS or where in DOM is the stylesheet for mantine packages?

Answered by porkopek

May 6, 2022

My case is not an iframe, but the shadow-dom, but I think is the same.
What worked for me was

//creates the shadow dom
const element = document.createElement('div');
const shadowRoot = element.attachShadow({ mode: 'open' });
const mountPoint = document.createElement('div');
const emotionRoot = document.createElement('div');

shadowRoot.appendChild(mountPoint);
shadowRoot.appendChild(emotionRoot);

document.body.appendChild(element);


ReactDOM.render(
  <MantineProvider
    defaultProps={{ Portal: { target: emotionRoot } }} // this is necessary, because Portal renders by default outside of shadow-dom
    emotionOptions={{
      container: emotionRoot, // with this line, emotion renders st…

View full answer

rtivital · 2021-12-30T08:36:57Z

rtivital
Dec 30, 2021
Maintainer

Mantine does not use JSS anymore, please update to the latest version and see if that resolves your issue.

9 replies

rtivital Dec 30, 2021
Maintainer

No, idea, maybe Mantine is just incompatible with that library. I would start by exploring react-frame-component docs and asking maintainer of that library for help.

318097 Dec 30, 2021
Author

Ok thanks

318097 Dec 30, 2021
Author

Is the CSS hosted on a CDN?

rtivital Dec 30, 2021
Maintainer

No, all styles are included in js bundle and added to head via style tag in runtime

ryanseddon Jan 17, 2022

So what mantine needs to do is expose the underlying createCache from emotion so some configuration can be changed including where the styles are injected e.g. you do expose the getCache but that is just a readonly call.

import createCache from '@emotion/cache'
import { CacheProvider } from '@emotion/core'

import Frame, { FrameContextConsumer } from 'react-frame-component'

export default ({ children }) => {
  return (
    <Frame>
      <FrameContextConsumer>
        {{document} => {
          // Configure emotion to target iframes head using the frame context
          const cache = createCache({
            container: document.head
          });

          return (
            <CacheProvider value={cache}>
              {children}
            </CacheProvider>
          )
        }}
      </FrameContextConsumer>
    </Frame>
  )
}

Essentially the CacheProvider and createCache will need to be exposed via mantine. Doing this also allows you to support CSP when nonce attributes need to be passed down to injected styles.

porkopek · 2022-05-06T16:19:35Z

porkopek
May 6, 2022

My case is not an iframe, but the shadow-dom, but I think is the same.
What worked for me was

//creates the shadow dom
const element = document.createElement('div');
const shadowRoot = element.attachShadow({ mode: 'open' });
const mountPoint = document.createElement('div');
const emotionRoot = document.createElement('div');

shadowRoot.appendChild(mountPoint);
shadowRoot.appendChild(emotionRoot);

document.body.appendChild(element);


ReactDOM.render(
  <MantineProvider
    defaultProps={{ Portal: { target: emotionRoot } }} // this is necessary, because Portal renders by default outside of shadow-dom
    emotionOptions={{
      container: emotionRoot, // with this line, emotion renders styles inside the shadow dom element created before
      key: 'mantine',
    }}
  >
   Hello World!
  </MantineProvider>,
  mountPoint
);

14 replies

rtivital Jan 16, 2024
Maintainer

hyusetiawan Jan 16, 2024

@rtivital thank you, cssvariableselector is the missing piece, for people looking a setup using shadow dom with mantine, here is a working boilerplate as of mantine 7.

import { createRoot } from "react-dom/client"
import css from "@mantine/core/styles.css?inline"
import { Button, MantineProvider, createTheme } from "@mantine/core"
import ContentApp from "@/ContentApp"
export const theme = createTheme({
  /** Put your mantine theme override here */
})

const hostElement = document.createElement("div")

// Attach a shadow root to the element
const shadowRoot = hostElement.attachShadow({ mode: "closed" })

const appElement = document.createElement("div")
appElement.setAttribute("id", "app")
shadowRoot.appendChild(appElement)
// document.body.appendChild(appElement)
document.body.appendChild(hostElement)
const root = createRoot(appElement)

console.log(css)
root.render(
  <body>
    <MantineProvider
      getRootElement={() => appElement}
      cssVariablesSelector="#app"
      //   withCssVariables={false}
      theme={theme}
    >
      <style dangerouslySetInnerHTML={{ __html: css }} />
      <Button>works</Button>
    </MantineProvider>
  </body>
)

hjhjdev Feb 16, 2024

how about css modules? using vite with any "~.module.css" doesn't work.
Just adding classes.classname strategy doesn't work.

laugri May 24, 2024

For anyone interested in making Mantine work with content-script UIs in browser extensions, with the wrt.dev framework, here is what my entrypoints/context/index.tsx code looks like:

import "@mantine/core/styles.css"
import './style.css';
import ReactDOM from 'react-dom/client';
import { MantineProvider } from '@mantine/core';
import App from './App';

export default defineContentScript({
  matches: ['*://*/*'],
  cssInjectionMode: 'ui',

  async main(ctx) {
    const ui = await createShadowRootUi(ctx, {
      name: 'bloom-care-plugin',
      position: 'overlay',
      anchor: 'body',
      append: 'first',
      onMount: (container) => {
        // Container is a body, and React warns when creating a root on the body, so create a wrapper div
        const app = document.createElement('div');
        // in order to give Mantine a cssVariablesSelector, add an id or some kind of selector to the wrapper
        app.setAttribute("id", "bloom-care-extension-root")
        container.append(app);
        // Create a root on the UI container and render a component
        const root = ReactDOM.createRoot(app);
        root.render(
          <>
            <MantineProvider
              // set cssVariablesSelector and getRootElement to refer to the wrapper
              cssVariablesSelector="#bloom-care-extension-root"
              getRootElement={() => app}
            >
              <App />
            </MantineProvider>
          </>
        );
        return root;
      },
      onRemove: (root) => {
        root?.unmount();
      },
    });

    ui.mount();
  },
});

Many thanks to @hyusetiawan !

laugri May 29, 2024

Issues with DatepickerInput, Select, and other Portal-dependant components:

EDIT 2:

I couldn't make the Portal target work with ShadowDom (portals were either outside of it, or couldn't find selectors inside of it). Found a workaround with disabling portals for the components I wanted to use (doc), though this means I won't be able to use modals or drawers.

EDIT 1: ~~✅ Solved~~. I discovered that the syntax for Portal is:

Portal: {
  defaultProps: {
    target: root
  }
}

Original comment:

@rtivital Hi. Isn't Portal extendable in Mantine v7 ? I tried porting @porkopek 's suggestion of updated the target for portals but getting an error Property 'extend' does not exist on type 'ForwardRefExoticComponent<PortalProps & RefAttributes<HTMLDivElement>>. Am I doing something incorrectly ?

What I am trying to adap to v7 from Porkopek's code:

defaultProps={{ Portal: { target: emotionRoot } }} // this is necessary, because Portal renders by default outside of shadow-dom

What I am doing:

      const customTheme = createTheme({
          components: {
            Portal: Portal.extend({ // Property 'extend' does not exist on type 'ForwardRefExoticComponent<PortalProps & RefAttributes<HTMLDivElement>>'.
              defaultProps: {
                target: root
              },
            }),
          },
        });

Kinbaum · 2022-11-16T15:30:05Z

Kinbaum
Nov 16, 2022

@rtivital Looking for some guidance along this topic. I am federating my application into a shadow DOM container, and I am having some issue with the DatePicker. When I click on the input field, the DatePicker opens just fine, but when I try clicking a date or any of the controls, the picker immediately closes without making a selection.

Here is my configuration:

// `props.root` is the shadow DOM element
const cache = useMemo(() => createEmotionCache({
  key: 'orion',
  container: props.root
}), []);

return (
  <MantineProvider
      emotionCache={ cache }
      theme={ {
          components: {
              Portal: {
                  defaultProps: {
                      target: props.root
                  }
              }
          }
      } }
      withCSSVariables
      withGlobalStyles
      withNormalizeCSS>
      <DatePicker
          label="Test"
          inputFormat="MM/DD/YYYY"
          labelFormat="MM/YYYY"
          my="lg"
          clearable={ false }
          withAsterisk
          withinPortal />
  </MantineProvider>
);

I am able to use my keyboard to make selections... did notice this error after pressing the tab key:

Uncaught TypeError: Cannot read properties of undefined (reading 'display')
  at hidden (tabbable.js:7:1)
  at visible (tabbable.js:19:1)
  at focusable (tabbable.js:37:1)
  at tabbable (tabbable.js:42:1)
  at Array.filter (<anonymous>)
  at findTabbableDescendants (tabbable.js:45:1)
  at scopeTab (scope-tab.js:4:43)
  at HTMLDocument.handleKeyDown (use-focus-trap.js:53:17)

Here is a recording of this behavior

Screen.Recording.2022-11-16.at.10.27.37.AM.mov

Update

I have also tried this without using the withinPortal property, and I still get the same type of behavior

6 replies

Kinbaum Nov 16, 2022

Thanks for the reply. I am on the lastest version of all packages (5.8.0) and that error is still happening

Kinbaum Nov 16, 2022

@rtivital I've managed to locate where the issue is taking place. It is in the use-click-outside hook:

mantine/src/mantine-hooks/src/use-click-outside/use-click-outside.ts

Line 18 in 3fd5ae8

const shouldTrigger = nodes.every((node) => !!node && !node.contains(target));

Rather than using !node.contains(target)), we can accommodate the shadow DOM by changing that line to the following:

const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));

I'm happy to create a PR for this. It is working just as I would expect, and the original behavior is preserved as well.

Still have to resolve the broken focus trap, and the aria hider adding the aria-hidden attribute to the wrong element

rtivital Nov 16, 2022
Maintainer

Sure, feel free to send a PR

Kinbaum Nov 16, 2022

Alright, please have a look at the changes proposed #2982

hyusetiawan Feb 29, 2024

@Kinbaum apologies for bringing up an old thread but i am facing this issue right now, although your fix is merged, it's somehow still exhibiting the same error.
The checkbox event gets triggered but it also closes the Popover, for completeness sake I also tried it with withinPortal={false} but it's still not working. Do you have leads on how to fix or work around this issue?

Screen.Recording.2024-02-28.at.5.22.56.PM.mov

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mantine

Not able to load mantine css inside iframe #598

{{title}}

Replies: 3 comments 29 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Not able to load mantine css inside iframe #598

Replies: 3 comments · 29 replies

rtivital Dec 30, 2021 Maintainer

rtivital Dec 30, 2021 Maintainer

318097 Dec 30, 2021 Author

318097 Dec 30, 2021 Author

rtivital Dec 30, 2021 Maintainer

rtivital Jan 16, 2024 Maintainer

Update

rtivital Nov 16, 2022 Maintainer

Replies: 3 comments 29 replies

rtivital
Dec 30, 2021
Maintainer

rtivital Dec 30, 2021
Maintainer

318097 Dec 30, 2021
Author

318097 Dec 30, 2021
Author

rtivital Dec 30, 2021
Maintainer

rtivital Jan 16, 2024
Maintainer

rtivital Nov 16, 2022
Maintainer