Merge pull request #48 from cssinjs/feature/pass-props-to-components

Pass props to composed React Components

Author: lttb

src/styled.js

@@ -38,11 +38,11 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => {
   const {
     style,
     tagName,
-    reactComponent = tagName
+    reactComponent,
   }: {
     style?: ComponentStyleType,
     tagName: string,
-    reactComponent?: string | typeof element
+    reactComponent?: typeof element
   } = getParamsByElement(element)
 
   const elementStyle = {...style, ...ownStyle}
@@ -114,15 +114,15 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => {
     render() {
       const {children, className, ...attrs} = this.props
 
-      const props = filterProps(tagName, attrs)
+      const props = reactComponent ? attrs : filterProps(tagName, attrs)
       const tagClass = composeClasses([
         this.staticClassName,
         staticTagName && this.sheet.classes[staticTagName],
         this.dynamicTagName && this.sheet.classes[this.dynamicTagName],
         className
       ])
 
-      return createElement(reactComponent, {...props, className: tagClass}, children)
+      return createElement(reactComponent || tagName, {...props, className: tagClass}, children)
     }
   }
 

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

@@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`functional tests Compose React Components should pass props 1`] = `
+<Component>
+  <StyledElement
+    className="testClassName"
+    testProp={1}
+    testProp2="2"
+  >
+    <Component
+      className="StyledElement-1-id testClassName"
+      testProp={1}
+      testProp2="2"
+    >
+      {"testProp":1,"testProp2":"2","className":"StyledElement-1-id testClassName"}
+    </Component>
+  </StyledElement>
+</Component>
+`;
+
+exports[`functional tests Compose React Components should pass props 2`] = `
+".StyledElement-1-id {
+  padding: 10px;
+}"
+`;
+
 exports[`functional tests Compose React Components should use .displayName 1`] = `
 <StyledElement>
   <TestDisplayName
@@ -56,7 +80,7 @@ exports[`functional tests Compose React Components should use .name 3`] = `
 
 exports[`functional tests Compose React Components should use .name 4`] = `
 ".StyledElement-1-id {
-  padding: 30px;
+  padding: 10px;
 }"
 `;
 

src/tests/functional.spec.jsx

@@ -189,10 +189,18 @@ describe('functional tests', () => {
 
     it('should use .name', () => {
       const StyledTest = styled(props => <h1 {...props}>test</h1>)({
-        padding: 30,
+        padding: 10,
       })
       assertComponent(StyledTest)
       assertSheet(styled.sheet)
     })
+
+    it('should pass props', () => {
+      const StyledTest = styled(props => JSON.stringify(props))({
+        padding: 10,
+      })
+      assertComponent(() => <StyledTest testProp={1} testProp2="2" className="testClassName" />)
+      assertSheet(styled.sheet)
+    })
   })
 })