Cannot customize max-height css property for image in lightbox

[jimdigrease]

Tried to do this (in styled-component):

.lightbox :global(.yarl__slide_image) {
  max-height: 86%;
}

that do nothing.

The goal is to left more space above and below image to show centered titles and captures to not overlay with it. Have not found another solution. Any help, please. What am I doing wrong?

[igordanchenko]

You can increase the padding around each slide with the following setting:

carousel={{ padding: 64 }}

but that increases padding on all 4 sides, not just on the vertical axis.

You can also override the inline style rendered by the library with !important:

.yarl__slide_image {
  max-height: 86% !important;
}

Please let me know if the above addresses your use case.

[jimdigrease]

Yes, just for height.
Sorry for bother, forgot this option,

.lightbox :global(.yarl__slide_image) {
  max-height: 86% !important;
}

this does work