Merge pull request #68 from cssinjs/feature/bug-67

fix for issue #67

Author: lttb

src/styled.js

@@ -66,6 +66,12 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => {
   class StyledElement extends Component<StyledElementPropsType, StateType> {
     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
     }

src/tests/__snapshots__/index.spec.jsx.snap

@@ -111,3 +111,11 @@ exports[`base rendering tests renders correctly App with injectStyled 1`] = `
   </div>
 </div>
 `;
+
+exports[`base rendering tests renders nested compositions correctly 1`] = `
+<div
+  className="C1-23-0-1-25"
+>
+  Test
+</div>
+`;

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 }) => (
+      <div className={className}>{children}</div>
+    )
+    const C2 = styled(C1)({color: '#333'})
+    const C3 = styled(C2)({padding: 3})
+    const tree = renderer.create(<C3>Test</C3>).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
 })