Is there a way to style the content loaded by an iframe in a React app using CSS?
I'm facing an issue with loading external content into my app, as the styles are outdated and I want to customize them.
See Example Below: (Please note that the src content of the <iframe/> has been replaced with dummy data for demonstration purposes, but the problem remains the same.)
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);
Check out this code sandbox for a visual representation of the problem.
In the provided example, I aim to change the color of h1#firstHeading to red.