[Question] preferred way of styling the component or setting custom zIndex

[thomasmery]

Hi,

thanks for this component,

just started using it and although base styles work just fine I need to change the z-index of the lightbox for it to be placed above another box that I can't change the z-index of (also might have to tweak other styles as well to match some other styles in my app)

so I was wondering if there was a preferred way of modifying the styles, apart from overriding with important in my own style sheets

thanks for your time

[fritz-c]

Actually there is not a way to modify the styles at this time. The package uses radium for styling, which is pretty easy to mix custom styles into, so if you're not averse to making a pull request allowing for custom styles injected via props, I can guarantee I'll look at it asap.

For starters, if you wanted to change the z-axis of the modal element (though I'm considering eventually changing this part to the react-modal component), you could add a style attribute to the <Portal> tag here: https://github.com/fritz-c/react-image-lightbox/blob/master/src/ReactImageLightbox.js#L950

[thomasmery]

Thanks,

I'd really like being able to contribute, I'll try if time allows in the next few weeks

anything I should know about building? I'm not so good with npm and build tools

I see you have a release script

how would I run it?

just running gulp in the node_modules/react-image-lightbox directory?

thanks

[fritz-c]

You'll want to fork the repository, clone it to a directory on your computer and work inside that.

I used the gulp tasks from https://github.com/JedWatson/react-component-gulp-tasks
So everything will be the same as in there, but I think the only command you'll need to know is gulp dev (also mapped to npm start), which starts up a local dev server, and you can see the effects of your changes on the sample page served up. All the build and publishing stuff I'll handle after merging a pull request.

[fritz-c]

@thomasmery Were you able to get it working for you?

[thomasmery]

Hi,

sadly I had no time to work on a proper solution and ended up modifying the zIndex in my css.

sorry I did not warn you

[fritz-c]

No, that's perfectly fine. Sorry for not making it customizable enough. I'll let you know when I make a release that better enables user styles.

[fritz-c]

As of release v3.1.0, the reactModalStyle prop can be used to customize the z-index, etc., of the modal holding the lightbox. Thanks for making this suggestion.