Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

can't insert styles from frame children components

See original GitHub issue

when import(‘index.css’) in subcomponent then will insert styles to parent document <head>. is react-frame-component can insert children components inner import styles to iframe? the example code:

<Frame>
  <Child />   
</Frame>

child.js

import('index.css') // this will insert to parent not iframe

Issue Analytics

State:
Created 6 years ago
Comments:12 (1 by maintainers)

Top GitHub Comments

5reactions

jashealcommented, Dec 5, 2017

Is there a working demo of the solution by any chance? Is it possible to just inject the styles directly into the iframe header?

5reactions

alimoosavi15commented, Nov 29, 2017

I know this is an old issue but another solution is to use file-loader plugin in Webpack to get the stylesheet path and add it to initialContent with a link tag.

import Frame from 'react-frame-component'
import styles from 'public/css/styles.iframe.css'

const initialContent = () => {
  return (
    `<!DOCTYPE html>
    <html>
      <head>
        <link href="${styles}" rel="stylesheet" />
      </head>
      <body>
        <div id="page" class="page"></div>
      </body>
    </html>`
  )
}

<Frame initialContent={initialContent()}>
    <FrameContent />
</Frame>

You may need to choose a specific file name for your stylesheet and add a new rule to your Webpack configuration that matches the file name:

module: {
      rules: [
        {
          test: /\.iframe.css$/,
          use: [
            { loader: 'file-loader' },
            { loader: 'postcss-loader' },
          ]
        },
      ]
}

Top Results From Across the Web

Create and insert component instances - Figma Help Center

Guide to style and component libraries → ... Insert instances of components from your keyboard using quick insert. Quick insert opens the Resources...

Override body style for content in an iframe - Stack Overflow

UPDATE - I've tried @mikeq's solution of adding a style to the class that is the body's class. This doesn't work when added...

Best practices for React iframes - LogRocket Blog

Explore two use cases for React iframes, embedding external content in a web application and isolating certain parts of an app.

tkinter.ttk — Tk themed widgets — Python 3.11.1 documentation

Ttk Styling¶ · ttk is assigned a style, which specifies the set of elements making up the widget and how they are arranged,...

Figma Tutorial: Components - The Basics - YouTube

Figma is free to use. Sign up here: http://bit.ly/2K5jJ0pIn this video we'll cover the basics of Components and how they can be a...