v6 Warning: React does not recognize the "someProp" prop on a DOM element

[giannif]

Are transient props required to have the $? I seem to arbitrarily get a React warning about props being passed through to the dom element:

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

Arbitrarily meaning that I have 100s of styled components that have the same structure like below but only a few actually throw the warning:

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

This issue was reported here, but I also saw it in another project and had to revert to styled components 5.

We have a lot of legacy components and changing all the props to $ will be a large task. If you have any recommendations, please lmk

[bcole808]

I believe transient props do need to start with $.

According to the migration steps for v6, you can restore the previous behavior by wrapping your app in <StylesheetManager> and providing an implementation for shouldForwardProp.

For example, you can do something like this to restore the behavior from v5:

import isPropValid from '@emotion/is-prop-valid';
import { StyleSheetManager } from 'styled-components';

function MyApp() {
    return (
        <StyleSheetManager shouldForwardProp={shouldForwardProp}>
            {/* other providers or your application's JSX */}
        </StyleSheetManager>
    )
}

// This implements the default behavior from styled-components v5
function shouldForwardProp(propName, target) {
    if (typeof target === "string") {
        // For HTML elements, forward the prop if it is a valid HTML attribute
        return isPropValid(propName);
    }
    // For other elements, forward all props
    return true;
}

[giannif]

Thanks for clarifying. Somehow I missed the migration guide. I believe I tried the above about a month ago and I was still receiving warnings. I will give it a try again though 🙏

[giannif]

Okay the problem is I do want to forward props a lot of the time, even if they're not "valid".
For example in this use case:

type Props = { className: string; title: string }
const Component = ( { className, title }: Props ) => <div className={className}>{title}</div>
// style my react component using this common pattern:
const StyledComponent = styled(Component)`
  margin: 0 auto;
`

const Page = () => <StyledComponent title="Hello Everybody" />

So if I filter with isPropValid, myOwnProp does not make it to my component.

Is there a way styled components can forward props to React Components all the time? because renaming this prop to $myOwnProp doesn't make sense either. This is a real problem. Lmk if I'm missing something

[giannif]

Update: I see this is how it's supposed to work

But in my Next.JS app, it does not work this way I get React Component props, and then I get just an object with with a className:

As you can see, the React Component prop user disappears and a prop object with just className is passed to my React Component

I am on styled-components v6.0.7. And am using the StyleManager wrapping my components in _app.tsx using the Pages Router (Not the new App Router yet, that's why I'm trying to upgrade to v6). If you have any ideas, any help would be appreciated

[bcole808]

In v5, it would forward all props to wrapped React components but filter them from being forwarded on HTML nodes. In v6, you have to re-configure it to have the behavior you are looking for.

If you use the code example I provided above, exactly, it should re-create the behavior from v5 where it will forward props to React components, but filter props from being forwarded to HTML nodes.

You need to make sure to include the function I wrote that checks if (typeof target === "string"), and if the target is not a string (meaning it is a React Component) then the function should return true in order to forward the prop to the React Component. If you only use isPropValid, then it is going to filter invalid HTML attributes from being forwarded even from being passed to wrapped React Components.

Edited to clarify the difference between v5 and v6