Table loose type safety when stylized

[fabien0102]

Problem

If we use styled(Table)({}), the resulted component is not type safe anymore, and also not really styled.

Snippet

const MyPimpTable = styled(Table)`
  backgroundcolor: pink; /* Because it's girly ! */
`;

const data = [
  { name: "dora", isGirly: true },
  { name: "batman", isGirly: false },
  { name: "barby", isGirly: true }
];

const App = () => (
  <OperationalUI>
    {/* This is type safe */}
    <Table data={data} columns={["name", "plop"]} />
    {/* This is NOT type safe, and also not girly… */}
    <MyPimpTable data={data} columns={["name", "plop"]} />
  </OperationalUI>
);

Codesandbox