fix(emotion): pass options through (#202)

styled-components · Mar 15, 2021 · 781704c · 781704c
1 parent 1194100
commit 781704c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/emotion/src/styled.test.tsx b/packages/emotion/src/styled.test.tsx
@@ -142,6 +142,15 @@ describe('#styled', () => {
     const { container } = render(<Dummy />)
     expect(container.firstChild).toHaveStyle('color: red; margin: 4px;')
   })
+
+  it('passes options through', () => {
+    // https://emotion.sh/docs/styled#customizing-prop-forwarding
+    const Dummy = styled('div', {
+      shouldForwardProp: (prop) => prop !== 'color',
+    })``
+    const { container } = render(<Dummy color="lemonchiffon" />)
+    expect(container.firstChild).not.toHaveAttribute('color', 'lemonchiffon')
+  })
 })
 
 describe('#styled.xxx', () => {

diff --git a/packages/emotion/src/styled.ts b/packages/emotion/src/styled.ts
@@ -33,8 +33,8 @@ type BoxStyledTags = {
 interface CreateXStyled extends CreateStyled, BoxStyledTags {}
 
 // @ts-ignore
-export const styled: CreateXStyled = (component: any) => {
-  return getCreateStyle(emStyled(component))
+export const styled: CreateXStyled = (component: any, options: any) => {
+  return getCreateStyle(emStyled(component, options))
 }
 
 styled.box = styled(x.div)