From f5fe53757bf2944235ded96a83935e1a1912dcc4 Mon Sep 17 00:00:00 2001 From: Clay Diffrient Date: Wed, 8 Apr 2015 18:56:51 -0600 Subject: [PATCH] [added] Ability to specify style for the modal contents This makes it so you can pass a style prop to the ReactModal component which will be added to the contents of the modal. This is really nice for instances where adding a className isn't appropriate such as when position needs to be set dynamically. --- lib/components/ModalPortal.js | 1 + specs/Modal.spec.js | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js index ad325958..7bbcd84c 100644 --- a/lib/components/ModalPortal.js +++ b/lib/components/ModalPortal.js @@ -147,6 +147,7 @@ var ModalPortal = module.exports = React.createClass({ }, div({ ref: "content", + style: this.props.style, className: cx(this.buildClassName('content'), this.props.className), tabIndex: "-1", onClick: stopPropagation, diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index 5563e9ab..126188cf 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -110,6 +110,11 @@ describe('Modal', function () { unmountModal(); }); + it('supports adding style to the modal contents', function () { + var modal = renderModal({isOpen: true, style: {width: '20px'}}); + equal(modal.portal.refs.content.getDOMNode().style.width, '20px'); + }); + it('adds --after-open for animations', function() { var modal = renderModal({isOpen: true}); var overlay = document.querySelector('.ReactModal__Overlay');