StyleSheetManager `shouldForwardProp` does not prevent prop forwarding

[charlie-at-deaglo]

System:

• OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
• CPU: (2) x64 AMD EPYC
• Memory: 266.70 MB / 2.01 GB
• Container: Yes
• Shell: Unknown

  Binaries:

• Node: 20.9.0 - /usr/local/bin/node
• Yarn: 1.22.19 - /usr/local/bin/yarn
• npm: 9.8.1 - /usr/local/bin/npm
• pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm

  npmPackages:

• styled-components: 6.1.8 => 6.1.8

Reproduction

Code Sandbox

Steps to reproduce

• Run Code Sandbox Next project in dev mode
• Open console to observe warnings

Expected Behavior

The Next application in the linked Code Sandbox is configured to use the app directory with StyleSheetManager to enable SSR, as is described in the Next.js docs. In v6, prop forwarding is controlled via the shouldForwardProp prop on the StyleSheetManager. To prevent invalid props from being sent to the DOM, the FAQs section of the docs recommends using isPropValid from @emotion/is-prop-valid to validate props, which I have setup in the Code Sandbox. Providing this callback to the StyleSheetManager should prevent invalid props from being forwarded to the DOM. In the Code Sandbox, this would mean that the someProp prop on the <Component /> component is not sent to the DOM.

Actual Behavior

someProp is forwarded to the DOM, which causes the following warnings to be printed to the console:

styled-components: it looks like an unknown prop "someProp" 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 `someProp` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `someprop` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[goosewin]

+1. It looks like the only way to avoid console spam with warnings right now is to use $transientProps

[Kobol909]

Actually it does work.

The issue you're facing is caused by the fact you're returning the children on client, as is, without any props filtering. if (typeof window !== "undefined") return <>{children}</>;

While many docs suggest writing that, it's not doing any filtering.

You can leverage the StyleSheetManager to also filter props on the client like below:

const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return styles;
  });

  const shouldForwardProp = (propName: string, target: any) => {
    return typeof target === "string" ? isPropValid(propName) : true;
  };

  if (typeof window !== "undefined") {
    return (
      <StyleSheetManager
        enableVendorPrefixes
        shouldForwardProp={shouldForwardProp}
      >
        {children}
      </StyleSheetManager>
    );
  }