4.0.x breaks wrapped style props

When wrapping a component in 4.0 it appears that the props are no longer passed to the rebass components.

Here’s an example with 3.x: https://codesandbox.io/s/affectionate-golick-0lio2

You can see that the color prop gets passed down to the rebass text and gets colored red

However in 4.x: https://codesandbox.io/s/lucid-cartwright-vdrbx

The extended component loses the color prop (with both emotion and styled-components)

[johnryan]

I reworked to use the sx and css props where appropriate ant it seems to solve the issue. Going to close this since it seems like a fine workaround. Thanks again!

[johnryan]

I think you’re right about the as issue (it works fine if i don’t use that). I set up a trimmed down example here: https://codesandbox.io/s/optimistic-mcnulty-ki61b

but it looks like it basically comes down to how the Text component is built…

namely: const Text = forwardRef((props, ref) => <Box ref={ref} tx="text" {...props} />); vs const Text = styled(Box)(themed("Text"));