scss module styles are not working

ryanseddon / react-frame-component

Render your React app to an iFrame

http://ryanseddon.github.io/react-frame-component/

MIT License

1.75k stars 156 forks source link

scss module styles are not working #241

Closed Ritesh560 closed 1 year ago

Ritesh560 commented 1 year ago

Hi, thanks for this amazing component but I am getting issues while using this with my react app. Can you help me by telling what am i missing.

I am using this frame like this:-

in App.js we are importing scss modules like import styles from "./styles.scss" and using this in classname as styles.class.

The scss is not loading when we use this Frame tag.

Thanks in advance.

ryanseddon commented 1 year ago

I get this question a lot so will create an open issue to add it to the readme but in the mean time.

You'll need to leverage the FrameContextConsumer or the useFrame hook to get access to the iFrames document.

In your case it will probably be easiest to clone the style tag injected for that scss module into the head of the iframe.

See demo : https://codesandbox.io/s/inspiring-solomon-r8ido1?file=%2Fsrc%2FApp.js

// Grab document instance from Frame context
const { document: doc } = useFrame();

// Only need to run this once on mount
useEffect(() => {
    // query document of parent
  const styleTag = document.head.querySelector("style");
  const frameStyles = styleTag.cloneNode(true);

  // doc is reference to iframe document
  doc.head.append(frameStyles);
}, []);

This gets reference to the iframe document using the useFrame hook and then querys for the first style tag, clones it and appends it to the iframe <head />.

Tiffanysbear commented 1 year ago

it is not work for css in your demo.

wangly19 commented 7 months ago

ColorPicker is unable to display the content panel properly.

look:

ryanseddon commented 7 months ago

Can you share the codesandbox?

wangly19 commented 7 months ago

Can you share the codesandbox?

OK，I think this is an issue with antd popover.js

demo: https://stackblitz.com/edit/react-ezrpsx-qbfr8s?file=demo.tsx

ryanseddon commented 6 months ago

So dug into this and it seems antd popover uses rc-tooltip and when inside an iframe the css inset property isn't calculated correctly and it quickly changes to 0, 0 but then jumps to -1000vh, -1000vw.

I created a reduced test case with just rc-tooltip and it does the same thing when inside an iframe. https://stackblitz.com/edit/vitejs-vite-m1stud?file=src/App.jsx,package.json&terminal=dev

wangly19 commented 2 months ago

So dug into this and it seems antd popover uses rc-tooltip and when inside an iframe the css inset property isn't calculated correctly and it quickly changes to 0, 0 but then jumps to -1000vh, -1000vw.

I created a reduced test case with just rc-tooltip and it does the same thing when inside an iframe. https://stackblitz.com/edit/vitejs-vite-m1stud?file=src/App.jsx,package.json&terminal=dev

I have solved the problem. As below: ` <FrameContainer className={classes.frame} initialContent={tpl} mountTarget="#frameRoot"

{({ window: _window, document: _document }) => { Object.setPrototypeOf( (_window as any).HTMLElement.prototype, HTMLDivElement.prototype ); return ( props.children )
`