Which Approach Best Prevents Prop Leakage in Styled‑Components?

Preventing Accidental Public Access

Styled‑components forwards unknown props to the underlying DOM element, which can cause React warnings and unintentionally expose internal state as HTML attributes. The documented solution is the transient props convention: prefixing a prop with $ (e.g., $primary) tells styled‑components to consume it for styling only and not forward it to the host element.

However, this filtering only applies when rendering to native host elements; when the styled component wraps a custom React component, all props—including $‑prefixed ones—are forwarded to that component. To address this, styled‑components provides a shouldForwardProp option (via withConfig or StyleSheetManager) that allows programmatic control over which props reach the DOM. The API and behavior of shouldForwardProp vary across major releases, and its effect can be scoped globally or per‑component.

Given these constraints, the decision remains: which strategy—transient props alone, shouldForwardProp alone, or a hybrid approach—offers the most robust protection against prop leakage when styling both native elements and custom components?

How does the styled‑components version in use influence the availability and semantics of shouldForwardProp?

Can the transient prop convention be reliably enforced across third‑party components that may not strip $-prefixed props?