diff --git a/src/styled.js b/src/styled.js index 09b1ced..556f2fc 100644 --- a/src/styled.js +++ b/src/styled.js @@ -56,7 +56,7 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => { this.sheet.addRule(this.dynamicTagName, dynamicStyle) } - classMap[this.dynamicTagName] = rulesIndex.slice(rulesTotal) + classMap[this.dynamicTagName] = classMap[this.dynamicTagName] || rulesIndex.slice(rulesTotal) this.updateSheet(this.props) } @@ -83,8 +83,8 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => { const props = filterProps(attrs) const tagClass = composeClasses([ - this.sheet.classes[staticTagName], - this.sheet.classes[this.dynamicTagName], + staticTagName && this.sheet.classes[staticTagName], + this.dynamicTagName && this.sheet.classes[this.dynamicTagName], className ]) diff --git a/src/tests/__snapshots__/functional.spec.jsx.snap b/src/tests/__snapshots__/functional.spec.jsx.snap index 250e211..2bb3b0e 100644 --- a/src/tests/__snapshots__/functional.spec.jsx.snap +++ b/src/tests/__snapshots__/functional.spec.jsx.snap @@ -75,3 +75,15 @@ exports[`functional tests should update props and unmount 2`] = ` color: yellow; }" `; + +exports[`functional tests should use props on remount 1`] = ` +".button-1-id { + color: black; +}" +`; + +exports[`functional tests should use props on remount 2`] = ` +".button-1-id { + color: red; +}" +`; diff --git a/src/tests/functional.spec.jsx b/src/tests/functional.spec.jsx index d24d8a2..7b28cae 100644 --- a/src/tests/functional.spec.jsx +++ b/src/tests/functional.spec.jsx @@ -93,4 +93,21 @@ describe('functional tests', () => { assertSheet(sheet) wrapper.unmount() }) + + it('should use props on remount', () => { + const Button = styled('button')({ + color: props => (props.primary ? 'red' : 'black') + }) + + const wrapper = mount(