Is there a way to style currently active thumbnail a little differently?

[jagadishg]

I would like to know if there is a way I can set custom thumbnail styles when its selected or active. I see custom render function. But I see that approach an overkill just to style the active thumbnail. Please let me know how to achieve this? If custom thumbnail render function is the only way, pls direct me to a documentation explaining how to implement custom thumbnail render function

[igordanchenko]

Most of the existing styles can be adjusted with CSS variables. For example, here is how you can change the active thumbnail border color:

<Lightbox
  styles={{
    thumbnail: { "--yarl__thumbnails_thumbnail_active_border_color": "red" },
  }}
  // ...
/>

Alternatively, you can target specific CSS classes:

.yarl__thumbnails_thumbnail_active {
  border-color: red;
}