I’m using MUI win next and register multiple MUI component withChildren in Builder.io
But builder is adding extra div
It effect my whole UI, I have created almost 25 pages and just came across about it.
It is a disaster situation for me
Hi Hafiz,
Would you be able to provide an example using screenshots/videos of where the extra div is being added and how it’s affecting your CSS, along with the Public API key of your space so we can also take a look?
Thanks
Hey @nicke920 Please check these attached pictures, I registered a custom component
MUIBox and use it in builder.io. When I placed an other Box component in it. It is not visible for me I passed the inner box height and width in %. When I inspect it the inner box is hide due builder auto added div. When I drag it outside the builder auto added div it is visible for me
Can you please guide How can I avoid this extra builder div. It effects MY layout
You can add the noWrap: true property when you register the block, which will remove the additional <div>.
Note that then, in order to select the your component in the Builder editor, the component will need to accept the attributes prop sent from the editor, e.g.:
function MyComponent(props) {
return (
<div {...props.attributes}>
</div>
)
}
See here in the docs:
Registering Custom Components - Builder.io.
Thank you @JonathanLand , couldn’t have said it better myself.
One note to add is that when using noWrap: true , it is important to pass {...props.attributes} to ensure class names are assigned correctly as in the following example.
But of course, we have a great doc as Jonathan has linked to that explains this in depth with an example: Registering Custom Components - Builder.io
Thank you guys @nicke920 & @JonathanLand.
I would like to express my sincere gratitude for your assistance in resolving the issue. The solution you provided has proven to be immensely helpful to me. The layout is fine now. 