Next.js Discord

Discord Forum

How can I inject styles into an iframe in NextJS

Unanswered
Indian mackerel posted this in #help-forum
Open in Discord
Indian mackerelOP
Hello everyone, I'm trying to inject custom styles into an iframe in my NextJs App.
- I tried the method of putting a <style> element inside the <iframe> but it didn't work.
- I tried the style props for some reason breaks the app (maybe because of tailwind)
- I tried to link the stylesheet with rel="Stylesheet" href="path/to/css", but Nextjs dosen't allow it and it dosen't work.

Is there another method? or am I doing something wrong?

2 Replies

Giant Angora
If you control the iframe / CORS allows you should be able to either:

window.frames[0].document.body.style.display = "none";

or
const styles = document.createElement('link');
styles.href = "path/to/injected.css";
styles.rel = "stylesheet";
styles.type = "text/css";
window.frames[0].document.head.appendChild(styles);
Giant Angora
But if its an external site you cannot do this unless it explicitly allows your domain to do so.