v6: using styled(Component) results in looks like an unknown prop is being sent through to the DOM

[zackheil]

I have noticed that some of my custom components that I attempt to style later with styled(MyComponent) are resulting in looks like an unknown prop is being sent through to the DOM messages. As far as I understand from reading the migration guide, that feature is still supported, but wanted to still know if this is a bug or I'm missing something. It seems to be different than #4058.

Take this simple demonstration component for example, I know that passing this message prop will result in it appearing in the DOM:

const Example = styled.h1<{ message: string }>`
  color: ${({ message }) => (message.includes('!') ? 'blue' : 'unset')};
`;

// usage:
<Example message="Hello!">Hello!</Example>

And that is exactly what I see:

<h1 message="Hello!" class="sc-dlfmnT cbdAIS">Hello!</h1>

But the behavior of wrapping an existing component in a styled() statement doesn't cause the props to display in the DOM:

const Example = ({ message, className }) => {
  return (
    <div className={className}>
      <h1>{message}</h1>
    </div>
  );
};
const StyledExample = styled(Example)`
  color: blue;
`;

// usage:
<StyledExample message="Example!" />

<div class="sc-aXZVg jxPTNQ"><h1>Example!</h1></div>

But now I get the following:

styled-components: it looks like an unknown prop "message" 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.) 

I saw the shouldForwardProp changes in the migration guide and I tried it just for fun, though I know it's meant for filtering props out, and got the following:

const Example = ({ message, className }) => {
  return (
    <div className={className}>
      <h1>{message}</h1>
    </div>
  );
};
const StyledExample = styled(Example).withConfig({
  shouldForwardProp: (prop) => 'message' !== prop,
})`
  color: blue;
`;

// usage:
<StyledExample message="Example!" />

<div class="sc-aXZVg jxPTNQ"><h1></h1></div>

though it did get rid of the warning

Reproduction

Here are 2 repros: v5 and v6. Both with examples in the App.tsx

v5: https://stackblitz.com/edit/vite-react-ts-keymr5?file=src%2FApp.tsx
v6: https://stackblitz.com/edit/vite-react-ts-vscvhm?file=src%2FApp.tsx

[woodreamz]

Same as #4049. I also created a really simple codesandbox similar to your example.

We are waiting for an answer but the warning seems to not be accurate.

[lucasgdb]

same issue here, using mui v5.

export const RCPasswordField = styled(({ InputProps, ...rest }) => <TextField {...rest} InputProps={InputProps} />)``

tried transient props, is-prop-valid from @emotion, withConfig and nothing solved. still having this issue.

[pankajpatel]

I faced the same issue and managed to work around it with the use of StyleSheetManager.

Here's what my provider looks like

  <StyleSheetManager
    enableVendorPrefixes
    shouldForwardProp={(propName, elementToBeRendered) => {
      return typeof elementToBeRendered === 'string' ? isPropValid(propName) : true;
    }}
    {...props}
  >
    <ThemeProvider theme={theme}>
      {...}
    </ThemeProvider>
  </StyleSheetManager>

Works well so far; still need to check the wide usage in production

[jonasmarco]

I faced the same issue and managed to work around it with the use of StyleSheetManager.

Here's what my provider looks like

  <StyleSheetManager
    enableVendorPrefixes
    shouldForwardProp={(propName, elementToBeRendered) => {
      return typeof elementToBeRendered === 'string' ? isPropValid(propName) : true;
    }}
    {...props}
  >
    <ThemeProvider theme={theme}>
      {...}
    </ThemeProvider>
  </StyleSheetManager>

Works well so far; still need to check the wide usage in production

Hello, can you provide the complete code? For example, where does "isPropValid" come from?

I have this code below:

registry.tsx

'use client'

import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import {
  ServerStyleSheet,
  StyleSheetManager,
  ThemeProvider
} from 'styled-components'
import theme from '@/styles/theme'
import GlobalStyles from '@/styles/global'

export default function StyledComponentsRegistry({
  children
}: {
  children: React.ReactNode
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())

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

  if (typeof window !== 'undefined') return <>{children}</>

  return (
    <StyleSheetManager
      enableVendorPrefixes
      // shouldForwardProp={(propName, elementToBeRendered) => {
      //   return typeof elementToBeRendered === 'string' ? isPropValid(propName) : true;
      // }}
      sheet={styledComponentsStyleSheet.instance}
    >
      <ThemeProvider theme={theme}>
        {children}
        <GlobalStyles />
      </ThemeProvider>
    </StyleSheetManager>
  )
}

layout.tsx

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html lang="pt-BR">
        <body>
          <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
        </body>
    </html>
  )
}

[arsinclair]

I faced the same issue and managed to work around it with the use of StyleSheetManager.

Here's what my provider looks like

  <StyleSheetManager
    enableVendorPrefixes
    shouldForwardProp={(propName, elementToBeRendered) => {
      return typeof elementToBeRendered === 'string' ? isPropValid(propName) : true;
    }}
    {...props}
  >
    <ThemeProvider theme={theme}>
      {...}
    </ThemeProvider>
  </StyleSheetManager>

Works well so far; still need to check the wide usage in production

Does this have any performance implications? Is this check shouldForwardProp happening in the build-time or in the runtime?

[pankajpatel]

@arsinclair The shouldForwardProp check is happening on runtime, so I assume there will be some performance implications.

Maybe memorization can help.

Though I tried digging in the old version of styled components to see how it was handled, and it is at runtime

[pankajpatel]

@jonasmarco

Hello, can you provide the complete code? For example, where does "isPropValid" come from?

isPropValid is coming from is-prop-valid package as suggested by the SC migration guide.

[woodreamz]

This should be fixed by this PR #4084. The warning will only be displayed on standard HTML elements and not when styling a React component.

[zackheil]

This is fixed on my end. Thanks @woodreamz!

[iphyman]

Was having same issue and wanted to omit some other attributes that are been forwarded to the DOM, below code was helpful.

Packages comes from standard styled-components install

"use client";

import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";
import isPropValid from "@emotion/is-prop-valid";

export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());

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

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

  return (
    <StyleSheetManager
      sheet={styledComponentsStyleSheet.instance}
      shouldForwardProp={(propName, elementToBeRendered) => {
        return typeof elementToBeRendered === "string"
          ? isPropValid(propName) && !["height", "width"].includes(propName)
          : true;
      }}
    >
      {children}
    </StyleSheetManager>
  );
}