how to use external css or ant design component inside the iframe

[sheikharifulislam]

i have used react-frame-component for manage Iframe. but problem is when i want to use ant design component inside the Iframe. then ant design component design and functionality not work, also when i do use external CSS for style Iframecontext again this css not work. how to solve this problem ?

[ryanseddon]

Check out #242

[sheikharifulislam]

This way is good. but, when i will use component library i don't know how will handle style this library.so how will added style iframe content when i will use component library

[ryanseddon]

For antdesign specifically it uses the emotion css in js library under the hood so you can just pull in the antd StyleProvider and change the container prop to reference the iframe document by using the useFrame hook e.g.

import { StyleProvider } from '@ant-design/cssinjs';
import Frame, { useFrame } from 'react-frame-component';
import { Button } from 'antd';

const FrameStyleProvider = ({ children }) => {
  // Hook returns iframe's window and document instances from Frame context
  const { document } = useFrame();

  return <StyleProvider container={document.head}>{children}</StyleProvider>;
};

const App = () => {
  <Frame>
    <FrameStyleProvider>
      <Button type="primary">Primary Button</Button>
    </FrameStyleProvider>
  </Frame>
}

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