somewhere in the rendering pipeline, these props leak to DOM elements maxWidth, right and other

[aman-infinity-softech]

Issue Check list

• Agree to the Code of Conduct
• Read the README
• You are using React 16.8.0+
• You installed styled-components
• Include relevant code or preferably a code sandbox

Describe the bug

// The issue is a BUG in react-data-table-component
// Even though minWidth and right are officially supported in the TypeScript definitions,
// the library is incorrectly passing them to DOM elements

To Reproduce use this code

import DataTable from "react-data-table-component";

export default function App() {

const minimalColumns = [
{
name: "Name",
selector: (row) => row.name,
minWidth: "150px",
right: true,
},
{
name: "Email",
selector: (row) => row.email,
minWidth: "200px",
}
];

const minimalData = [
{ name: "John", email: "john@example.com" },
{ name: "Jane", email: "jane@example.com" }];
return (

);
}

Expected behavior

A clear and concise description of what you expected to happen.

Code Sandbox, Screenshots, or Relevant Code

in index.cjs.js file line number 91 and 195

Otherwise, add screenshots and/or complete sample code to help explain your problem.

Versions (please complete the following information)

• React (RDT requires 16.8.0+)
• Browser chrome

[lkinsella]

This is a change in the styled-components dependency I believe. I was running into the same issue and found this:

https://medium.com/@darwish.saja/fixing-shouldforwardprop-warnings-in-styled-components-v6-2b288eaa9fcc

Implementing it seems to resolve the issue for now.