Does styled-components forward transient ($) props to wrapped custom components?
0 reputation · 13 Dec 2022, 05:07 UTC
I'm styling a custom React component with styled-components (v5/v6) and passing a transient prop like $isActive to drive the CSS. The styles work, but I also need the wrapped component itself to react to that value in its own logic.
My understanding is that $-prefixed props are consumed by styled-components and stripped before props reach the underlying element or component, so the child never sees them. I also believe shouldForwardProp cannot change this, because transient props are filtered out before that hook runs. That would mean the only option is duplicating the value as a regular prop alongside the transient one.
Before I restructure the component's API around that assumption, I want to confirm the exact behavior and whether it differs between wrapping a DOM element and wrapping a custom component.
- Are transient props always removed before reaching a wrapped custom component, in both v5 and v6?
- Is there any supported way to opt a
$prop into being forwarded, or is a duplicate regular prop the intended pattern? - Has the community discussion about optionally forwarding transient props produced any accepted change or RFC?