styled component error "it looks like an unknown prop "responsive" is sent through to the DOM, which will likely trigger a React console error."

Question

I am using react data table component which requires me to install styled component.

The moment i render the DataTable after passing the columns and data prop, I get various errors on my console saying there is a problem with some of the props im using such as the isActive. Meanwhile, I am actually not using that prop anywhere in my code

screenshot of the error

My code where I am using the data table component

Answer 1

This is a breaking change from a dependency of react-data-table-component, styled-components version 6

The react-data-table-component library will need to be updated to properly use styled-components 6. For now, I solved this by downgrading styled-components to version 5:

npm install styled-components@5

Answer 2

I've been facing the same issue and there are a few workarounds out there to make it work, one of these is the one mentioned above (downgrading the package), however, in my case what worked out was:

I added the shouldForwardProp provided in the migration guide in my helpers file, then I exported it, and voila!

I guess the migration guide is pretty straightforward, at least it worked on my case, hope it helps guys!

Migration Guide v6

Regards

Answer 3

You need to use https://www.npmjs.com/package/@emotion/is-prop-valid

then try to use such a wrapper:

<StyleSheetManager shouldForwardProp={shouldForwardProp}>
    <App />
</StyleSheetManager>

And then – the shouldForwardProp realisation from previous answer or similar.