Using Twin Macro in a module in Hubspot

[kaifresh]

Hey guys,

I'm using twin macro & react as a module within a larger landing page building platform called Hubspot. What I'm noticing is that the <GlobalStyles/> element is overwriting the default theme resets that we've built into Hubspot.

So my question is, what is the best way to prevent this from happening?

Is it possible to change the selectors in <GlobalStyles/> to descendant selectors so that they are only applying those styles to a particular class?

[ben-rogerson]

Hey there 👋

Twin doesn't have this capability but you can supply your own scoped globalstyles.
It will make it a little more difficult staying on top of changes during some version upgrades though.

Best bet is to import globalStyles then map over the styles to add your scoping classes and then lodge them as global styles with your css-in-js library.
Here's an example with styled components.