我正在使用NextJS中的另一個react lightbox，我想為PNG圖像設置一個圖像背景顏色。

這就是我的Lightbox組件:

<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,
       }}
/>

在本例中，styles改變了整個背景的顏色，但是我只想改變圖像背景的顏色。我想法是在yarl _ _ slide _ image(img標簽的類)中設置背景色屬性，但是我對CSS不太熟悉。

有什么我可以做的樣式燈箱這種方式？Lightbox中有什么屬性可以讓我這樣做嗎？我也試圖在render屬性中改變它覆蓋slide，但是沒有成功。

您可以使用以下css設置燈箱圖像背景:

<style jsx global>{`
  .yarl__slide_image {
    background-color: rgba(255, 255, 255, 0.8);
  }
`}</style>

下面是一個極簡的工作示例——https://code sandbox . io/p/sandbox/stack overflow-76122862-7s 4 ygw？file=%2Fpages%2Findex.jsx