Classname warning appears because loadable loading component doesn't attach it

When you try to style a HOC [like react-loadable] you will get a console.warn, that the className is not being passed down, even if it is.

Reproduction

https://codesandbox.io/s/pyx951r0rj

Steps to reproduce

Open the console.

Expected Behavior

No console.warn

Actual Behavior

There is this console.warn It looks like you've wrapped styled() around your React component (LoadableComponent), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

[martonlanga]

For the folks using Next.js, don’t forget to add this .babelrc config to your project.

[probablyup]

styled(SomeComponent) is not an unrecommended pattern. It’s a core use case in fact.

On Sun, Oct 21, 2018, 3:20 PM Phil Plückthun [e-mail] wrote:

I’m not sure this is worth addressing:

• styled(SomeComponent) is not recommended
• The warning is technically correct; the className is indeed not applied
• Loadable -> StyledComponent -> ActualLoadedComponent would do the trick even

So I’m not sure whether we should spend the added time on improving its accuracy 😕

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2126#issuecomment-431700728, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1qRxHijMegqEEZ_zZ3c-FjVu0aKXks5unNccgaJpZM4Xv0lN .