diff --git a/src/styled.js b/src/styled.js index 379174b..f8e29eb 100644 --- a/src/styled.js +++ b/src/styled.js @@ -66,6 +66,12 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => { class StyledElement extends Component { static tagName: string = tagName static style: ComponentStyleType[] = elementStyle + + // If the base component is a React component (and thus neither an intrinsic tag or a + // styled element), make sure to keep a reference to the component around. Otherwise deeply + // nested styled elements won't render the base component correctly. + static reactComponent = reactComponent + static contextTypes = { [channel]: object } diff --git a/src/tests/__snapshots__/index.spec.jsx.snap b/src/tests/__snapshots__/index.spec.jsx.snap index beb05fc..1240ed2 100644 --- a/src/tests/__snapshots__/index.spec.jsx.snap +++ b/src/tests/__snapshots__/index.spec.jsx.snap @@ -111,3 +111,11 @@ exports[`base rendering tests renders correctly App with injectStyled 1`] = ` `; + +exports[`base rendering tests renders nested compositions correctly 1`] = ` +
+ Test +
+`; diff --git a/src/tests/index.spec.jsx b/src/tests/index.spec.jsx index b673828..13153e5 100644 --- a/src/tests/index.spec.jsx +++ b/src/tests/index.spec.jsx @@ -45,4 +45,15 @@ describe('base rendering tests', () => { expect(tree).toMatchSnapshot() }) + + it('renders nested compositions correctly', () => { + const C1 = ({children, className}: { children: any, className?: string }) => ( +
{children}
+ ) + const C2 = styled(C1)({color: '#333'}) + const C3 = styled(C2)({padding: 3}) + const tree = renderer.create(Test).toJSON() + + expect(tree).toMatchSnapshot() + }) })