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

[fixed] Custom classnames override default styles

Author: claydiffrient

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,

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');