Rebass: Can't pass down styled props to an extended styled system + rebass component

[coreybruyere]

I'm creating a Position component like so:

import styled from 'styled-components'
import { position } from 'styled-system'
import { Box as Base } from 'rebass/styled-components'

const Position = styled(({ position, ...props }) => <Base {...props} />)`
  ${position}
`

export default Position

I'm expecting to be able to use it like so after importing into another file:

const Header = styled(Position)` color: red `;

<Header
  as="header"
  mb={4} // Box styled props
  pt={3} // Box styled props
  position="sticky"
  top={0}
  left={'auto'}
  right={'auto'}
  zIndex={100}
>

Do I need to be utilizing forwardRef ? Is there a way to pass down both Box props and Position props from an extended component?

[jxnblk]

At first glance, this looks like it should work. Can you provide a codesandbox link with a reproduction?

[coreybruyere]

@jxnblk Here's a link to the CodeSandbox: https://codesandbox.io/s/jovial-fire-b81hq?fontsize=14&hidenavigation=1&theme=dark

[AndrewPrifer]

@coreybruyere @jxnblk it seems that styled-components has some magic going on starting 4.0.0 whereby it doesn't render extended components, it only inherits their styles (I guess for speed?). Obviously then, you can't pass down props to a component that doesn't get rendered. Weirdly it is not documented in their migration guide or anywhere. Replace styled-components with either

[coreybruyere]

Thanks Andrew. I figured something funky was going on. You know where I can find a deeper explanation to what is happening behind the scenes? I noticed a lot of libraries and the theme-ui/rebass community were moving to emotion but no mention as to why.

[AndrewPrifer]

No idea about the community in general, I mainly just prefer emotion’s css prop instead of creating one shot components for every styled div. Plus emotion seems to be react concurrent mode ready, but that shouldn’t be a concern for now I think.