React - Как применить стили CSS к содержимому iframe

Question

В приложении React, как я могу применить стили CSS к содержимому src, загруженному iframe?

У меня есть приложение, загружающее внешний контент, но стили действительно устарели, и я хотел бы перезаписать его.

Пример Bellow: (Обратите внимание, что я заменил src содержимое <iframe/> на некоторые фиктивные данные, однако проблема остается той же.

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 на red.

Answer 1

Этот вопрос не является специфичным для React, и на него дан ответ Как применить CSS к iframe? .

В целом, хотя могут быть некоторые хаки и обходные пути, не существует надежного решения, если только вы не контролируете встраиваемый веб-сайт или не изменили настройки CORS на веб-сайте.

Answer 2

Обычно вы делаете это с помощью JavaScript:

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

Однако это не разрешено для кросс-исходных фреймов.

Ошибка: заблокирован фрейм с источником "..." от доступа к фрейму перекрестного происхождения.