React - 如何将CSS样式应用于iframe内容

Question

在React应用程序中，我如何将CSS样式应用于由iframe加载的src内容？

我有一个加载外部内容的应用程序，但是样式非常过时，我想覆盖它。

以下示例：（请注意，我已使用一些虚拟数据替换了<iframe />的 src 内容，但问题仍然存在。）

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Frame extends React.Component {
  componentDidMount() {
    document
      .querySelector("iframe")
      .contentWindow.document.querySelector("h1#firstHeading").style.color =
      "red";
  }
  render() {
    return (
      <iframe
        title="How Can I overwrite the styles from the src content?"
        src="https://en.wikipedia.org/wiki/Herbie_Hancock"
        width="90%"
        height="500px"
        scrolling="no"
      />
    );
  }
}


function App() {
  return (
    <div className="App">
      <Frame />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这里有一个 代码沙盒，展示了我的问题。

在这个沙盒的例子中，我想要将 h1#firstHeading 的颜色改为 红色。

- Null isTrue

Answer 1

通常情况下，您可以使用JavaScript来完成这个任务：

document.querySelector('iframe').contentWindow.document.querySelector("h1#firstHeading").style.color = "red";

然而，对于跨域iframe，这是不允许的。

错误：阻止了源自“...”的框架访问跨源框架。

- Raphael Rafatpanah

---

请问您能否演示如何基于我的沙盒代码进行操作？ - Null isTrue

这个解决方案直接在控件上设置颜色。问题是如何将CSS样式应用于Iframe。 - Kesty

Answer 2

这个问题与React无关，答案在如何将CSS应用于iframe？中得到解答。

总的来说，虽然可能存在一些hack和解决方法，但除非您控制嵌入网站或该网站具有放宽的CORS设置，否则没有可靠的解决方案。

- thompsonsj

---

谢谢提供链接。我希望学习如何将其与React应用程序连接并实现它。 - Null isTrue

这个问题可能与React有关。链接中的答案使用了硬编码样式或单独链接到CSS文件，但在React应用程序中可能不是这种情况。 - Devs love ZenUML

在React中使用Iframe并不是一件直接的事情...所以这个问题是与React相关的。 - Mogli

在普通的HTML中，你可以这样写： <iframe style="height: calc(100vh - 50px)" src=...> 但在React中，你需要用两个大括号包裹样式，像这样： <iframe style={{height: 'calc(100vh - 50px)'}} src=...> - undefined