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)