Next.js Discord

Discord Forum

How can i import my globals.css styles into an iframe

Answered
Pacific sand lance posted this in #help-forum
Open in Discord
Avatar
Pacific sand lanceOP
Does anyone know how to import the tailwinds globals.css into an iframe?
I'm currently using a CDN but i need my own ones from my app, not the cdn.
Image
Answered by B33fb0n3
open the source code for the requested url. Import the global.css on top. You can't do it for a page that you don't own

--- Edit
And as you saw you might also want to change the url of the iframe too [(see here)](https://nextjs-forum.com/post/1319571940238823506#message-1319580104430583818)
View full answer

11 Replies

Avatar
B33fb0n3
you can't. The requested page decides how it will look like. So when you want to add your globals.css to your iframe page, you need to change the underlying page itself and add it there
Avatar
Pacific sand lanceOP
Can you elaborate further on how to achieve this. Thanks
Avatar
B33fb0n3
open the source code for the requested url. Import the global.css on top. You can't do it for a page that you don't own

--- Edit
And as you saw you might also want to change the url of the iframe too [(see here)](https://nextjs-forum.com/post/1319571940238823506#message-1319580104430583818)
Answer
Avatar
Pacific sand lanceOP
Dope. Thanks...
Image
Any idea how I would import my font styles and my theme colors?
THe component look good now, all the styles are there. Except for the theming and fonts
Avatar
B33fb0n3
the only thing that you can modify for an iframe is the url. So provide a query param for example inside the url that's the correct theme. Like /my/url/path?theme=aqua or simliar
Avatar
Pacific sand lanceOP
I got it, thanks a lot. You can make custom styles and apply to the Link when rendering the iframe, useeffect to switch up the themes
Image
Much appreciated, saved me a bunch of time
Avatar
B33fb0n3
happy to help