Skip to content

Commit

Permalink
[fixed] Custom classnames override default styles
Browse files Browse the repository at this point in the history
This makes it so if you provide a custom className it will override
all the default styling, relying solely on the style props you pass
in and the className itself.

Prior to this commit, providing a className or overlayClassName
doesn't really have any effect because the style attribute has higher
precedent when applying styles.
  • Loading branch information
claydiffrient committed Nov 6, 2015
1 parent 1a0a069 commit 63bee72
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
7 changes: 5 additions & 2 deletions lib/components/ModalPortal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 11 additions & 0 deletions specs/Modal.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down

0 comments on commit 63bee72

Please sign in to comment.