How Can I Customize The Style of My Lightbox?

[idanhovav]

I'm trying to put a white background behind my images because I can still see the spinner behind my png images. Also png files don't have a background and I'd like them to have one in general.

The default style that comes in the library, default.js, is applied to the Lightbox component right before it's exported in the last line of src/Lightbox.js:

export default useSheet(Lightbox, defaultStyles);

I've tried calling the react-jss method useSheet() on Lightbox after importing it to the file I'm using it in with my own jss stylesheet, but it doesn't seem to change anything.

I've also tried adding inline style to the Lightbox component.

Code from first approach:

import Lightbox from "react-images";
import reactJss from "react-jss";
import camelCase from "jss-camel-case";
import px from "jss-px";
import nested from "jss-nested";
import vendorPrefixer from "jss-vendor-prefixer";

const jss = create();
const useSheet = reactJss(jss);
jss.use(camelCase());
jss.use(nested());
jss.use(px());
jss.use(vendorPrefixer());

import myStyles from "./default.js";

const StylizedLightbox = useSheet(Lightbox, myStyles);

class MyLightbox extends Component {

[...]

render() {
    return (
        <StylizedLightbox
            [...]
       /> 

Code from second approach:

import Lightbox from "react-images";

class MyLightbox extends Component {

[...]

render() {
    return (
      <Lightbox style = {{ backgroundColor: "white" }}
        currentImage={this.props.currentImage}
      />
    );
  }

Thank you for any help.

[neptunian]

You can at least override it in your own css file:
#react-images-container{
background-color: #FFF;
}