BuilderComponent customization

Technical Questions
1

Hello, I am currently learning your tool, it is great!

I made a custom model, named ‘section-test’ and using next.js with getStaticProps I fetch it, but if I would like to add some more customization, some styling (I am using TailwindCSS), how could I do that?

import { builder, BuilderComponent } from '@builder.io/react'

const MyComponent = (props) => (
  <BuilderComponent
    className="mb-10 pb-10 border-2 border-blue"
    content={props.content}
    model="section-test"
    style
  />
)

export default MyComponent

This way not working, can you please help me out?

2

Hi @radikris!

Instead of passing className to the BuilderComponent, can you try wrapping the <BuilderComponent> in a div, for example:

const MyComponent = (props) => (
<div className="wrapper-class-names">
  <BuilderComponent
    content={props.content}
    model="section-test"
    style
  />
</div>
)

You can also learn more about using Tailwind CSS with custom components and Builder layers here.

3

Why did I not think of that, thanks