Hello Builder.io Community,
I am experiencing a styling issue in my Remix + Hydrogen project using Builder.io. When rendering both a page model and a section model (like a footer) on the same route, the Builder.io styles are applied twice. This leads to the footer’s styles overwriting the page’s styles unexpectedly.
•Framework: Remix
Integration: Builder.io with @builder.io/sdk-react/edge
•Setup:
A page model (Content model=page) for the main content.|
A section model (Content model=footer) is rendered dynamically for the footer.|
Both are rendered within the same route, using Builder’s Content component.|
Custom components are registered properly;
*Problem
When both models are rendered on the same page, the styles injected by Builder.io (e.g., .builder-button { all: unset; }) are applied twice. This causes the styles from the footer section to overwrite those of the page model.
root.tsx - Loads the footer model with fetch one entry, pass this to the next component:
PageLayout.tsx - Receive the footer model and render it with component
($slug)._index - loads and render page model
Bug on the page, I’ve encountered two style sheets exactly the same
So it leads the button style to be unseated to the page model
Questions
-
Is there a recommended way to isolate styles for different Builder.io models on the same route?
-
Can we conditionally or dynamically control the injection of Builder.io’s stylesheets?
3.Has anyone else encountered this issue, and how did you resolve it?