diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js index b7db99c7..818350e9 100644 --- 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 index e0052815..514e7e43 100644 --- 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');