Merge pull request reactjs#100 from claydiffrient/bugfix/classes-take…

…-precedence [fixed] Custom classnames override default styles
jaksenko · Mar 24, 2016 · bc58b9c · bc58b9c
2 parents 7f631bd + 63bee72
commit bc58b9c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
@@ -175,16 +175,19 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   render: function() {
+    var contentStyles = (this.props.className) ? {} : defaultStyles.content;
+    var overlayStyles = (this.props.overlayClassName) ? {} : defaultStyles.overlay;
+
     return this.shouldBeClosed() ? div() : (
       div({
         ref: "overlay",
         className: this.buildClassName('overlay', this.props.overlayClassName),
-        style: Assign({}, defaultStyles.overlay, this.props.style.overlay || {}),
+        style: Assign({}, overlayStyles, this.props.style.overlay || {}),
         onClick: this.handleOverlayClick
       },
         div({
           ref: "content",
-          style: Assign({}, defaultStyles.content, this.props.style.content || {}),
+          style: Assign({}, contentStyles, this.props.style.content || {}),
           className: this.buildClassName('content', this.props.className),
           tabIndex: "-1",
           onClick: stopPropagation,

diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -104,6 +104,17 @@ describe('Modal', function () {
     unmountModal();
   });
 
+  it('overrides the default styles when a custom classname is used', function () {
+    var modal = renderModal({isOpen: true, className: 'myClass'});
+    equal(modal.portal.refs.content.style.top, '');
+    unmountModal();
+  });
+
+  it('overrides the default styles when a custom overlayClassName is used', function () {
+    var modal = renderModal({isOpen: true, overlayClassName: 'myOverlayClass'});
+    equal(modal.portal.refs.overlay.style.backgroundColor, '');
+  });
+
   it('supports adding style to the modal contents', function () {
     var modal = renderModal({isOpen: true, style: {content: {width: '20px'}}});
     equal(modal.portal.refs.content.style.width, '20px');