Unwanted Prop Forwarding in Styled Components v6

[swiiny]

Description

With the migration to Styled Components v6, we're experiencing warnings in the console related to various custom props being forwarded to the DOM.

Warnings:

styled-components: it looks like an unknown prop "isActive" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid) or consider using transient props ($ prefix for automatic filtering.)

Warning: React does not recognize the isActive prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isactive instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Expected Behavior

Custom props should not be forwarded to the DOM when using styled components. They should be kept internal and not be rendered in the resulting HTML.

Steps to Reproduce

1. Navigate to any page/component using styled components with custom props.
2. Observe the aforementioned warnings in the console.

Potential Solution

• Option 1: Utilize <StyleSheetManager shouldForwardProp={...}> with an API like @emotion/is-prop-valid to automatically filter unknown props.
• Option 2: Adopt the use of transient props by prefixing them with $ for automatic filtering.

Recommendation

Evaluate both options mentioned above to ascertain which is more appropriate for our setup. The ideal solution would be one that prevents such warnings across all components without introducing regressions.