Styling Plasmo CSUI – Plasmo
Hello, I have a problem with the content script fonts when it switches between tabs. The font changes styling changes (e.g, weight, size, color, etc.) to match the current tabs/page font styling (e.g if plasmo's homepage uses a global fontsize
html * { fontSize: '0.7rem' } the content gets affected too). I read up the https://docs.plasmo.com/framework/content-scripts-ui/styling#custom-font and at one point the font family didn't change but when I tried it again on Wikipedia and it came with the same results. This is the second extension I am building with this blocker #team-plasmo I need you here. 😥Plasmo Docs
Styling Plasmo CSUI – Plasmo
Plasmo CSUI's built-in Root Container allows extension developers to safely style their components.
6 Replies
Paul, were you ever able to figure this out? I'm having the same issue. @louisgv and I were chatting here: https://github.com/PlasmoHQ/plasmo/discussions/660
GitHub
Tailwind CSS from parent page leaking into CSUI · PlasmoHQ plasmo ·...
What happened? When building a basic CSUI (with Vue), default config - the CSS from the parent page is leaking into the shadow/root component. My understanding is this should not be the default beh...
Hey @Joshua Perk, nope still stuck
@paulemas if you do css reset on the root id of the CSUI, does it work?
This is somewhat tricky with global style - we can add some css reset at the shadowDOM root, but will need to think about how those reset affect the style within
I'd give it a try later today @louisgv
Hey gents! Paul, not sure if it helps with your particular case but checkout my discussion link above - I took a few random notes as I was troubleshooting. The thing that might be applicable to you is my last note around
rem units. In my case, I was using Tailwinds which is all based around using rem as the CSS unit. As we know, rem is based on the "root" element or in this case the font size set at the html level. Since the shadomDOM is not a true root, that means everything is relative to the parent website's font size - which can vary. I could not find any way to change this (not without messing up the parent website), so I ended up just converting Tailwind to work using static pixel sizes instead of root element sizes. I hope this helps!@Joshua Perk has reached level 1. GG!