diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js index 4c15c902..52687115 100644 --- a/lib/components/ModalPortal.js +++ b/lib/components/ModalPortal.js @@ -2,6 +2,7 @@ var React = require('react'); var div = React.DOM.div; var focusManager = require('../helpers/focusManager'); var scopeTab = require('../helpers/scopeTab'); +var cx = require('react/lib/cx'); // so that our CSS is statically analyzable var CLASS_NAMES = { @@ -147,7 +148,7 @@ var ModalPortal = module.exports = React.createClass({ }, div({ ref: "content", - className: this.buildClassName('content'), + className: cx(this.buildClassName('content'), this.props.className), tabIndex: "-1", onClick: stopPropagation, onKeyDown: this.handleKeyDown diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index 504d43a0..7ceb1a90 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -98,6 +98,12 @@ describe('Modal', function () { }); }); + it('supports custom className', function() { + var modal = renderModal({isOpen: true, className: 'myClass'}); + equal(modal.portal.refs.content.getDOMNode().className.contains('myClass'), true); + unmountModal(); + }); + it('adds --after-open for animations', function() { var modal = renderModal({isOpen: true}); var overlay = document.querySelector('.ReactModal__Overlay');