styled-components v.6 and framer-motion (and other libraries) props API "unknown prop" warning when used with `styled()` or `as` API

[SirMoustache]

Hey, I'm trying to update to styled-components v.6 from v.5 and I'm getting the next warning in the console:

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

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

Here is an example of usage

export type HeaderProps = {
  $variant: HeaderVariant;
  $color: ColorScheme;
  $position?: HeaderPosition;
};

export const Header = styled(motion.header)<HeaderProps>`
  z-index: 7;
  border-bottom: 1px solid #e9e9e7;
  transition: background 300ms ease-in-out;

  ${({ $position: position }) => position && headerPositionMap[position]};
  ${({ $variant: variant }) => variant && headerVariantMap[variant]};

  ${({ theme }) => theme.media.min('xl')} {
    height: auto;
  }
`;

const Layout = () => {
// ...
<>
  <Header
        $position={headerPosition}
        $variant={headerVariant}
        $color={colorScheme}
        layout="position"
        transition={{ duration: 0.2, type: 'tween' }}
      >
      {/* ...  */}
  </Header>
</>
}

The problem here is that layout and transition props are part of the framer-motion API and I can't use transient props, or filter them withConfig, because it's breaking component behavior:

export const Header = styled(motion.header).withConfig({
  // this will not just filter from the dom, but will not pass to the wrapped component completely
  shouldForwardProp: (prop) => !['layout', 'transition'].includes(prop),
})<HeaderProps>`
  z-index: 7;
  border-bottom: 1px solid #e9e9e7;
  transition: background 300ms ease-in-out;

  ${({ $position: position }) => position && headerPositionMap[position]};
  ${({ $variant: variant }) => variant && headerVariantMap[variant]};

  ${({ theme }) => theme.media.min('xl')} {
    height: auto;
  }
`;

And it's not only framer-motion, I'm having the same problems with the routing component, for example here route data is passed as field prop and part of the routing framework API, which gives the same warning.

const Layout = () => {
// ...
<>
        <NavigationLink
            as={Link}
            field={navItem.fields?.link}
            $isActive={isMatched}
            disabled={isDisabled}
            $color={colorScheme}
          >
            {/* ...  */}
          </NavigationLink>
</>
}

Is there a way to disable those warnings? Because there is no actual error because those libraries not passing those props to the DOM

[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.

[jonsadka]

Experiencing the same issue with Radix and the asChild prop

[giannif]

I get the warning with any prop I add to a styled component:

const Container = styled.div<{ givesTheWarning: boolean }>``

type Props = { givesTheWarning: boolean }
const Component = ({ givesTheWarning }: Props) => {
    // gives a warning 
    return <Container givesTheWarning={givesTheWarning} />
}

This only happens when it's in my next app. When I ran it in a separate project that's just a react library, I did not get these warnings

[jstevens79]

Same issue with framer-motion and style-modifiers. Had to roll back to v5 until there’s a solution for this.

[Liu0520]

I also encountered the same error. I wanted to add a property to the build to receive the colors in the network request and use it in the styled components. Then the warning l appeared, and I wanted to know how to eliminate this warning

[Crzek]

I also encountered the same error. I wanted to add a property to the build to receive the colors in the network request and use it in the styled components. Then the warning l appeared, and I wanted to know how to eliminate this warning

You can try this:

<ItemWrapper $verifycolor={itemData?.verify_info?/text_color || "#39576a"}>

In Your ItemWrapper Styled-component :

export const ItemWrapper = styled.div`
    color: ${({ $verifycolor }) => $verifycolor};
`

[kinoli]

Surprised theres no solution for this yet. Same issue here.

[getsoftware-eu]

useful link to fix