Customization
Yet Another React Lightbox allows you to customize pretty much any aspect of its visual appearance. Custom icons can be rendered via render prop. The color palette can be customized through CSS variables. The existing styles can be modified by targeting customization slots.
Customization slots
Yet Another React Lightbox defines the following customization slots that can be targeted either via lightbox styles prop or via corresponding CSS class.
Slot | CSS class |
---|---|
root | yarl__root |
container | yarl__container |
button | yarl__button |
icon | yarl__icon |
captionsTitle | yarl__slide_title |
captionsTitleContainer | yarl__slide_title_container |
captionsDescription | yarl__slide_description |
captionsDescriptionContainer | yarl__slide_description_container |
thumbnail | yarl__thumbnails_thumbnail |
thumbnailsTrack | yarl__thumbnails_track |
thumbnailsContainer | yarl__thumbnails_container |
CSS variables
All design-related styles can be overwritten via corresponding CSS variables. Here are some examples of lightbox variables, and you can find the complete list in the lightbox stylesheet.
--yarl__color_backdrop
--yarl__color_button
--yarl__color_button_active
--yarl__color_button_disabled
--yarl__slide_title_color
--yarl__slide_title_font_size
--yarl__slide_title_font_weight
--yarl__slide_description_color
Styling
Here are some typical recipes to style the lightbox.
CSS-in-JS
<Lightbox
styles={{ container: { backgroundColor: "rgba(0, 0, 0, .8)" } }}
// ...
/>
or
<Lightbox
styles={{ root: { "--yarl__color_backdrop": "rgba(0, 0, 0, .8)" } }}
// ...
/>
Global CSS
.yarl__container {
background-color: rgba(0, 0, 0, .8);
}
or
.yarl__root {
--yarl__color_backdrop: rgba(0, 0, 0, .8);
}
Module scoped CSS
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import styles from "./Component.module.css";
// ...
<Lightbox
className={styles.lightbox}
// ...
/>
.lightbox :global(.yarl__container) {
background-color: rgba(0, 0, 0, .8);
}
or
.lightbox {
--yarl__color_backdrop: rgba(0, 0, 0, .8);
}