search

reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.35k stars 809 forks source link

overlayClassName does not override default className #779

Open abriginets opened 4 years ago

abriginets commented 4 years ago

Summary:

If you try to set overlayClassName then overlay className will be not my-class-name but ReactModal__Overlay ReactModal__Overlay--after-open my-class-name.

Also ReactModal__Overlay--after-open is only added for the first time you open the modal. So if you open modal, close it and then open it again - the modal will be mounted with ReactModal__Overlay--after-open (this class should be added only after modal is opened to be able to use animations). You can see this bug here: https://codepen.io/JamesJGoodwin/pen/LYYVZGK

abriginets commented 4 years ago

Also overlayClassName seems to be immutable since this code has no effect:

overlayClassName={`modal-overlay${this.state.afterOpen === true ? ' --after-open' : ''}`}
onAfterOpen={() => this.setState({ afterOpen: true })}

This way overlay className will be still modal-overlay

@diasbruno

diasbruno commented 4 years ago

Hi @JamesJGoodwin. Unfortunately, our documentation is not complete about the class names.

Using a string as the class name will result in appending the name to the default list of class names. But you can give it an object specifying which names to use.

See https://github.com/reactjs/react-modal/blob/master/src/components/Modal.js#L39

And here is the link for the documentation.