Best way to override styles?

[cristianadrielbraun]

I know about the additional styles in the Props{Class}, but I mean more targeted changes. Ideally, of course, not touching the original library files so I don't lose any customization when updating.
Real example I find myself into: I want to modify specifically the bg-accent color being applied to the current day in the calendar component.
What's the best way to approach this?

[axadrn]

Good question! Previously, this wasn't possible with the calendar. You had to override the component files directly, which is actually the intended shadcn approach. But I've now implemented this with commit 3f687ad. This makes overriding more flexible using data-tui-calendar-today and data-tui-calendar-selected attributes with Tailwind's arbitrary variants.

Example:

@calendar.Calendar(calendar.Props{
   Class: "[&_[data-tui-calendar-today]]:bg-blue-500 [&_[data-tui-calendar-selected]]:text-white"
})

Thanks for the feedback! If you see other components where you'd like to override specific nested elements via the Class prop, please let me know. I'm happy to add data-attributes where it makes sense.