如何将样式化组件注入React iframe

在React中将样式化组件注入iframe的过程可以分为以下几个步骤：

创建一个React组件，用于包裹iframe元素，并设置iframe的src属性为目标页面的URL。

import React from 'react';

const IframeComponent = () => {
  return (
    <iframe src="目标页面的URL" />
  );
};

export default IframeComponent;

在目标页面中引入所需的样式化组件库，例如styled-components。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="样式化组件库的CSS文件URL" />
  </head>
  <body>
    <!-- 目标页面内容 -->
  </body>
</html>

在React组件中使用styled-components创建样式化组件，并将其注入到iframe中。

import React from 'react';
import styled from 'styled-components';

const StyledComponent = styled.div`
  /* 样式化组件的样式 */
`;

const IframeComponent = () => {
  const iframeRef = React.useRef(null);

  React.useEffect(() => {
    const iframeDocument = iframeRef.current.contentDocument;
    const styledComponent = document.createElement('div');
    styledComponent.innerHTML = '<style>样式化组件的CSS代码</style>';
    iframeDocument.body.appendChild(styledComponent);
  }, []);

  return (
    <iframe ref={iframeRef} src="目标页面的URL" />
  );
};

export default IframeComponent;

在上述代码中，我们使用了React的useRef和useEffect钩子函数。useRef用于获取iframe元素的引用，而useEffect在组件挂载后执行，将样式化组件的CSS代码注入到iframe的body中。

需要注意的是，由于浏览器的安全策略限制，如果目标页面与React应用不在同一个域名下，可能会遇到跨域问题。解决跨域问题的方法之一是在目标页面的响应头中添加Access-Control-Allow-Origin字段，允许来自React应用所在域名的请求。

这是一个基本的将样式化组件注入React iframe的方法，具体的实现可能会因项目需求而有所不同。对于样式化组件的分类、优势、应用场景以及腾讯云相关产品和产品介绍链接地址，可以根据具体的样式化组件库进行补充。

如何将样式化组件注入React iframe

reactjs、iframe、styled-components、react-frame-component

我正在构建一个chrome扩展，我需要使用iframe进行样式隔离，特别是'react-frame-component‘，我使用了样式组件，但是生成的类没有注入到iframe中，你有什么想法可以把它们注入到iframe中吗？

浏览 30提问于2020-12-08得票数 0

2回答

查找react /grid lib支持样式化的组件

reactjs、user-interface、datatable

我需要react /datagrid，它支持样式化的组件，我可以在样式表(表)中临时添加样式表，我还想注入自定义样式的组件行、过滤器、分页、覆盖。因为它应该是最新的可维护的图书馆。我检查了react table v6有样式回调，v7看起来不错，但仍在@alpha中。 Rectabular-table支持样式化的组件，看起来很不错，但在几

浏览 1提问于2019-03-31得票数 0

回答已采纳

1回答

样式-组件-为什么在组件样式之后注入全局样式？

reactjs、styled-components

考虑一下这个使用样式组件的react应用程序的例子：import { createGlobalStyle } from但是样式化-组件似乎在组件样式之后注入全局样式，或者至少以这种方式打印它。我的问题：为什么在组件样式之前没有注入全局样式？

浏览 2提问于2021-11-17得票数 0

回答已采纳

2回答

使用Rendertron渲染时，带有样式的组件的产品版本问题

reactjs、create-react-app、styled-components、googlebot、rendertron

有非常简单的示例应用程序，其中创建创建反应应用程序+样式的组件来证明这个问题。但我有很大的应用程序，我面临着这个问题，我将在下面解释它。但问题是当我建立的反应应用程序的生产版本，其中使用样式的组件。

浏览 54提问于2019-05-31得票数 3

1回答

在Iframe中使用物质UI组件

reactjs、material-ui

我一直在尝试让材料UI组件在Iframe中工作。Material为此目的提供了一个DemoFrame组件()，但是样式没有正确地插入到Iframe中。我创建了一个代码沙箱来演示这一点。更新：但是在我的演示中，风格并没有被注入到iframe中。

浏览 1提问于2019-01-26得票数 4

回答已采纳

3回答

Webpack SCSS分页前的闪烁

javascript、css、express、reactjs、webpack

我正在工作一个同构的React+Flux+express应用程序，并使用webpack加载器为我的sass (与sass-加载程序)和jsx文件。我不知道如何将样式表注入服务器端模板。现在，我正在将我的main.scss文件加载到一个像这样的React组件中： require("!style!css!/styles/main.scss");这对于

浏览 2提问于2015-02-17得票数 12

回答已采纳

1回答

使用react作为内容脚本时进行多次重新渲染

reactjs、google-chrome-extension、browser-extension

我目前正在学习如何使用React开发chrome扩展。然而，我遇到了一个问题，即使是一个非常基本的组件，react也会重新渲染3次。结果，内容脚本创建了3次嵌套在一起的iframe --我注意到的一件事是，每次重新呈现时，查询iframe总是返回null。 interface Props {

浏览 5提问于2021-06-15得票数 0

4回答

如何将Material-UI样式表注入jest/react-testing-library测试？

jestjs、material-ui、react-testing-library

似乎如果你不将Material-UI样式表注入到jest/react-testing-library测试中，那么jsdom将无法从你的组件中获得正确的样式(例如，运行getComputedStyle(component)将为组件返回不正确的样式)。如何正确设置jest/react- test -library测试，以便将样式正确地注入到测试中？我已经将组件包装在一个主题提供程序中

浏览 1提问于2019-05-20得票数 5

1回答

如何在使用“IFrame -frame-component”库创建的组件中加载由webpack提供的css？

reactjs、iframe、webpack、webpack-style-loader

我正尝试在iframe中呈现我的React组件。我通过使用"react-frame-component“库让它工作。问题是样式被加载到iframe之外，在"head“元素的末尾。我想将其更改为加载到"iframe“元素的"head”中。我使用Webpack来生成包含JS和CSS的bundle，我看到我可以通过设置"insertInto“选项来更改"style-loader”加载样式的位置，但这

浏览 1提问于2018-05-07得票数 7

2回答

如何创建接受颜色作为参数的反应组件？

javascript、css、reactjs

假设我想使用react创建一个自定义按钮。我希望这个组件接受颜色作为它的属性，并根据属性的颜色来呈现自己。class MyButton extends React.Component { super(props); {name} <

浏览 1提问于2018-02-23得票数 0

回答已采纳

1回答

角动态元件嵌入iframe时失去样式

javascript、angular、iframe

我需要一个动态组件嵌入到一个iframe中。我看到的实现这一目标的唯一方法是使用createComponent动态生成给定组件的新实例，然后将其移动到iframe的主体中。这种方法的问题是没有样式结转，因为动态组件是在父页面中生成并复制过来的-但是，样式被注入到父页面的头部，而不与它一起运行。我的想法是解决这个问题，要么想出一种手动将生成的样式迁移到iframe中的方法，要么在iframe本身中以某

浏览 6提问于2020-12-19得票数 1

回答已采纳

1回答

量角器中的角ViewEncapsulation.ShadowDom元给出StaleElementExceptionError

angular、protractor、angular-e2e

我在一个角组件中有一个iframe，我使用组件工厂动态地向其中注入一个组件X(将本机元素附加到iframe的体内)。我之所以这样做，是因为我需要媒体查询才能在组件中工作。如果没有ViewEncapsulation.ShadowDom，框架内注入的组件将是“无样式的”。总之，

浏览 6提问于2021-07-22得票数 2

2回答

如何从呈现方式/NextJS访问主题提供者/样式-组件样式

reactjs、next.js、styled-components

exampleClass { }` class LoginMenu extends React.Component它在样式组件类中运行良好，但我可以让它在呈现方法中工作并传递给该组件。有可能吗？我接近了吗？谢谢

浏览 2提问于2020-10-23得票数 0

回答已采纳

1回答

如何使用材料UI (梅) 5.0内的一个iframe？

javascript、reactjs、iframe、material-ui、emotion

我试图使用react在iframe中呈现MUI组件。虽然它们是在iframe中呈现的，但是当使用react门户在iframe中呈现时，它们失去了所有的thMUI组件的样式。

浏览 29提问于2021-12-24得票数 2

1回答

如何使用React编辑iframe内部的样式？

javascript、html、css、reactjs、iframe

我需要在一个react组件中呈现一个iframe，但是要在其中隐藏一个元素。不过，iframe的域是外部的。import React from 'react' return ( <> <iframe src="https:/

浏览 2提问于2020-06-29得票数 1

1回答

从React属性更改样式化组件中的css变量

css、reactjs、css-grid、styled-components、emotion

列数和行数是动态的，并且基于我从React中更高的组件中获得的道具。 如何将样式化组件(情感)中的css变量更改为从React props获得的数据？

浏览 25提问于2019-04-16得票数 0

2回答

造型反应JS

reactjs、react-native、styles

我想要创建一个组件，我可以传递一个支柱，它可以改变该组件的样式。就像块组件在某些中反应本机主题一样。这将改变背景颜色为灰色的东西。我是初学者对不起

浏览 0提问于2020-02-11得票数 0

2回答

具有多个类的React样式的组件

javascript、reactjs、typescript、frontend、styled-components

我正要使用样式组件在react中构建一个小项目，但是，我对使用这个包有一个问题。我想创建一个样式化的组件，将几个类集合在一起，但我不知道怎么做，例如：如何将其转换为带样式的组件？在css中有两个不同的类，但在样式组件中我不知道。谢谢。

浏览 20提问于2020-11-15得票数 3

回答已采纳

1回答

React与开发非常不同。

javascript、css、reactjs、build、styled-components

当我构建我的React应用程序时，它看起来与开发模式非常不同。我使用serve -s build来观察应用程序何时生成。但在我的在线Digitalocean服务器上，它看起来和开发中的不一样。": "^17.0.2", "react-router": "^6.0.2", "react-router-dom": "^

浏览 5提问于2022-03-09得票数 0

2回答

为什么使用ReactTestUtils将iframe呈现为jsdom不提供contentWindow？

javascript、node.js、iframe、jsdom

我正在尝试测试一个React组件，它呈现一个iframe并将标记直接注入到iframe中。(我并不试图在iframe中加载URL。)这个组件实际上在浏览器中工作得很好，但是到目前为止，为它编写一个测试似乎是不可能的。我不知道为什么。 componentDidMount() { console.log( '<em

浏览 3提问于2016-03-16得票数 2

回答已采纳

点击加载更多