Beginner question -> How to change width of atoms and apply custom styling

[MinimumDaan]

Hi all!

Might be a bit of a newby question but I have a hard time rendering the availability and booker atoms with specific widths. I'm rendering them in a parent container that has some width settings and is responsive but for some reason the elements seem to be overflowing that parent container.

Also, for some reason, the availability atom has a transparent background by default and I'm not sure what I should do to override those settings and give it different styling.

Could anyone maybe help me out and share some example code for the customClassNames settings?

Thanks in advance!

[dosubot[bot]]

Hello @MinimumDaan! I'm here to help you out. Let's tackle this together!

To change the width of atoms and apply custom styling, including setting specific widths and overriding default transparent backgrounds, you can use the customClassNames prop provided by the booker atom. This allows you to pass in custom class names for styling various parts of the atom.

Here's an example of how you can define custom CSS classes to set specific widths and override the default transparent background:

.w-[200px] {
  width: 200px;
}

.custom-background {
  background-color: #ffffff; /* Set your desired background color */
}

You can then apply these classes using the customClassNames prop in your component:

<Booker
  eventSlug={props.eventTypeSlug}
  username={props.calUsername}
  customClassNames={{
    bookerContainer: 'w-[200px] custom-background',
    // Add other custom class names as needed
  }}
  onCreateBookingSuccess={() => {
    console.log("booking created successfully");
  }}
/>

This approach allows you to dynamically apply custom styles to the booker atom, tailoring its appearance to your specific needs ^[1][2].

To continue talking to Dosu, mention @dosu.

Written by @dosu, approved by dosu-customer-success