diff --git a/packages/emotion/src/styled.test.tsx b/packages/emotion/src/styled.test.tsx index 7f3aab3e..809a70bb 100644 --- a/packages/emotion/src/styled.test.tsx +++ b/packages/emotion/src/styled.test.tsx @@ -142,6 +142,15 @@ describe('#styled', () => { const { container } = render() 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() + expect(container.firstChild).not.toHaveAttribute('color', 'lemonchiffon') + }) }) describe('#styled.xxx', () => { diff --git a/packages/emotion/src/styled.ts b/packages/emotion/src/styled.ts index fc4877a8..1a73d26c 100644 --- 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)