Wrapped custom components and overrides

Hello! I’m starting to understand the rendering model for the React/Solid SDKs. It seems that every element inserted into the page is wrapped with a div that has some default styles ie. padding and margin.

In my case I was attempting to apply a sticky property to my header component but because it was wrapped it wouldn’t work:

In the end I realized that the Builder style editor allows me to set these directly via CSS properties:

I’m wondering if it’s better to set these within my components directly so that they come as part of the code and not the editor. Is there a way to override/append to the wrapping div class properties so that I can solve it in code?

More broadly my curiosity is how should I solve this from an implementation perspective? Either solution is honestly fine with me (my header will be part of a Symbol anyways).

Hi @davedbase , for custom components you can use the noWrap option or set your own defaultStyles. You can read about those options here. Alternatively, you can turn off default styles globally for your space in Account Settings > Advanced Settings > Editor.

1 Like

Amazing, thank you for pointing out that doc with options. Very helpful! :slight_smile:

1 Like