React-modal: Disable Default Styles?

[idmontie]

Is there a way to completely disable the default styles?

I was hoping I could just use:

var customStyles = {
      overlay : false,
      content: false
    };

But, _.assign will just ignore the false value.

[mjyoung]

+1 this would be very useful. I would like to just position the elements using flexbox properties.

[ericsoco]

I was about to create an issue for the same thing. Only, I was going to create the issue as a suggestion to add this to docs:

To disable the default styles, specify null for each value to disable. This is useful for styling via a stylesheet instead of using inline styles. For example:

modalStyles = {
    content: {
        background: null
    {
};

This works -- any style set to null will not be written to the DOM element, and so can easily be specified with a stylesheet instead.

[idmontie]

@ericsoco It would be useful to have that in the docs, but it is quite annoying to have to override every single property for the content and the background if I want to use classes.

[Josh-a-e]

I'd love to see this, at the moment as a temp fix I have all the relevant styles set to null individually

On 12 Nov 2015, at 19:11, Eric Socolofsky [email protected] wrote:

I was about to create an issue for the same thing. Only, I was going to create the issue as a suggestion to add this to docs:

To disable the default styles, specify null for each value to disable. This is useful for styling via a stylesheet instead of using inline styles. For example:

modalStyles = {
content: {
background: null
{
};
—
Reply to this email directly or view it on GitHub.

[mjyoung]

Yep, @ericsoco's workaround worked for me.

If anyone's interested, these are the styles I'm using to have flexbox position the modal::
https://gist.github.com/mjyoung/c10ed08eefcf2e1d5afc

[ericsoco]

@idmontie agreed. I have this in my code now:

        modalStyle = {
            overlay : {
                backgroundColor: null
            },
            content : {
                top: null,
                left: null,
                right: null,
                bottom: null,
                border: null,
                background: null,
                borderRadius: null,
                padding: null,
                position: null
            }
        };

And that's a little ridiculous.

[grahamb]

I just ran into this while updating a project from 0.2 to 0.6.1. @ericsoco's workaround works, but is pretty gross.

100 looks like it'll fix it.

[hnq90]

We should write:

content: {
  top: 'initial',
  left: 'initial,
   ....
}

[sjungwirth]

And that's a little ridiculous.

agreed

[megapctr]

@ericsoco :+1: I can't understand why defaults are enforced like this

[pjnovas]

+1

[wavded]

Just opened another issue but then saw this one that is basically asking the same question. Having to turn off every style seems a little ridiculous and can be breaking if new "default" styles are added. Would prefer to just turn them off and work within CSS.

[dzmitry-kremez-itechart]

+1 Also as I see here https://github.com/reactjs/react-modal/blob/master/lib/components/ModalPortal.js#L183 you disable default styles if there are class names. But it doesn't work in latest(0.6.1) npm and bower lib version. Could you please publish latest master code to npm and bower?

[claydiffrient]

@dzmitry-kremez-itechart I'm working on finalizing a few details with the new release. It will happen soon, hopefully this week.

[dzmitry-kremez-itechart]

@claydiffrient cool, thx

[claydiffrient]

v1.0.0 was just published and classnames can override defaults now.