title: React - How to apply CSS styles to iframe content
body: <p>On a React app, how could I apply CSS styles to the src content that is been loaded by iframe?</p>
  
  <p>I have an app loading external content, but the styles are really dated and I'd like to overwrite it.</p>
  
  <p>Example Bellow: (Please note I replaced the <code>src</code> content of the <code>&lt;iframe/&gt;</code>, with some dummy data, however, the problem is still the same.</p>
  
  <pre><code>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 (
        &lt;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"
        /&gt;
      );
    }
  }
  
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Frame /&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>Here's a <a href="https://codesandbox.io/s/6v36vj1vx3" rel="noreferrer">code sandbox</a> illustrating my problem. </p>
  
  <p>In the sandbox example, I'd like to change the <code>h1#firstHeading</code> color to <code>red</code>.</p>