[added] Supporting custom overlay className

closes reactjs#14
DaveVanVliet · Nov 17, 2014 · 28dbc63 · 28dbc63
1 parent b15aa82
commit 28dbc63
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
@@ -142,7 +142,8 @@ var ModalPortal = module.exports = React.createClass({
   render: function() {
     return this.shouldBeClosed() ? div() : (
       div({
-        className: this.buildClassName('overlay'),
+        ref: "overlay",
+        className: cx(this.buildClassName('overlay'), this.props.overlayClassName),
         style: this.overlayStyles,
         onClick: this.handleOverlayClick
       },

diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -104,6 +104,12 @@ describe('Modal', function () {
     unmountModal();
   });
 
+  it('supports overlayClassName', function () {
+    var modal = renderModal({isOpen: true, overlayClassName: 'myOverlayClass'});
+    equal(modal.portal.refs.overlay.getDOMNode().className.contains('myOverlayClass'), true);
+    unmountModal();
+  });
+
   it('adds --after-open for animations', function() {
     var modal = renderModal({isOpen: true});
     var overlay = document.querySelector('.ReactModal__Overlay');