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.
@anon43891756 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!