I am currently working on implementing a react lightbox in NextJS, and I have a specific requirement to set the background color for a PNG image. Here is my Lightbox component setup:
<Lightbox
plugins={[Zoom]}
open={open}
closeOnBackdropClick={true}
close={() => setOpen(false)}
controller={{ closeOnBackdropClick: true }}
slides={[
{ src: imagePath },
]}
styles={{ container: { backgroundColor: "rgba(0, 0, 0, .8)" } }}
carousel={{ finite: true }}
render={{
buttonPrev: () => null,
buttonNext: () => null,
iconZoomIn: () => null,
iconZoomOut: () => null
}}
zoom={{
maxZoomPixelRatio: 3,
}}
/>
While the styles property changes the color of the entire background, my goal is to specifically change the color of the image background. I am trying to achieve this by setting the background-color property within the yarl__slide_image class (the class of the img tag), but my CSS skills are limited in this area.
Is there a way to style the lightbox in this manner? Is there a property within the Lightbox component that allows for this customization? I attempted to override the slide property within the render function, but it did not produce the desired result.