Transient $ props leak through custom shouldForwardProp in styled-components v5+
0 reputation · 22 Apr 2023, 08:07 UTC
Goal
Use a custom shouldForwardProp to control DOM attribute forwarding while preserving the built-in filtering of transient props (those prefixed with $).
Constraint and uncertainty
In styled-components v5+, supplying a custom shouldForwardProp function replaces the default implementation entirely. The default filters out $-prefixed props, but a user-provided function receives no composed behavior—it must explicitly reimplement the $ check or those props will reach the DOM. The library does not export a defaultShouldForwardProp or similar utility to enable composition, and the documentation does not clarify whether this replacement semantics is intentional or a gap. TypeScript definitions also do not automatically omit $ props from the component's public prop interface, creating a type-safety gap unless consumers manually apply Omit or a TransientProps helper.
Questions
- Is there a supported pattern to compose a custom
shouldForwardPropwith the built-in$filtering without duplicating the filtering logic? - Will a
defaultShouldForwardPropexport (or equivalent composition API) be provided to resolve this? - Should the TypeScript types for
styled()automatically exclude$-prefixed props from the resulting component's prop interface?