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.

SlotCSS class
rootyarl__root
containeryarl__container
buttonyarl__button
iconyarl__icon
captionsTitleyarl__slide_title
captionsTitleContaineryarl__slide_title_container
captionsDescriptionyarl__slide_description
captionsDescriptionContaineryarl__slide_description_​container
thumbnailyarl__thumbnails_thumbnail
thumbnailsTrackyarl__thumbnails_track
thumbnailsContaineryarl__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.

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);
}