Override custom components CSS

In order to customize the CSS of a custom component, what is the best way to use the builder CSS properties settings?

Builder wraps a custom component with a div (builder block), so the CSS properties I add using builder do not affect the actual element I need.

Hi @yuval222 , Thank you for contacting Builder.io Forum!

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 .

Hi, the noWrap option works well, but the user experience inside the builder platform is changing. For example, I’ve tried it on our custom button component, but I can’t edit it when I click on the element itself…only when I click on the layer on the layers tab i can I edit his inputs.

When registering the component ive added the noWrap:true option and passing {…props.attributes} to the element.

@garima Is this how it should work?

Hi @yuval222, Thanks for the follow-up!

Hope this post helps best to resolve your issue:- Custom Component with noWrap "true" cause focus issue

You can also see an example here: builder/Input.tsx at 7eb57b780e1b3d2718fb42ef83ea91bc281c37a5 · BuilderIO/builder · GitHub

Let me know if this doesn’t help or have further questions!