Skip to content

Commit

Permalink
Merge pull request reactjs#100 from claydiffrient/bugfix/classes-take…
Browse files Browse the repository at this point in the history
…-precedence

[fixed] Custom classnames override default styles
  • Loading branch information
claydiffrient committed Mar 24, 2016
2 parents 7f631bd + 63bee72 commit bc58b9c
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 bc58b9c

Please sign in to comment.