Syled generic component with Typescript

[julienmonnard]

Hello!
I'm coming to you for help, as I am not sure if this is a bug, a limitation or just me that is not doing things correctly 🙂

Basically, I have a React component, which takes advantage of generic types, like this:

type AnyObject = {
    [x: string]: any;
};

type TableProps<T> = {
  rows: T[];
  renderRow: (row: T) => ReactNode;
}

export const Table = <T extends AnyObject>(props: TableProps<T>) => {
  return (
    <table>
      <tbody>
        {props.rows.map((row) => (
          <tr>{props.renderRow(row)}</tr>
        ))}
      </tbody>
    </table>
  );
};

This approach allows me to have the types for row dynamically infered depending on the props I give to my Table component.

So when I use it like this:

const data = [
  {
    id: 1,
    name: "John",
  },
];

export const Parent = () => {
  return (
    <div>
      {/* below, the `row` argument of the renderRow prop is
       automatically infered to { id: number; name: string; } */}
      <Table rows={data} renderRow={(row) => <td>{row.name}</td>} />
    </div>
  );
};

The problem is, as soon as I use styled around the Table component, I lose that inference

const StyledTable = styled(Table)``;

const data = [
  {
    id: 1,
    name: "John",
  },
];

export const Parent = () => {
  return (
    <div>
      {/* below, the `row` argument of the renderRow prop is
       instead infered to AnyObject */}
      <StyledTable rows={data} renderRow={(row) => <td>{row.name}</td>} />
    </div>
  );
};

And if I remove the extends AnyObject from my Table component like this:

export const Table = <T,>(props: TableProps<T>) => {
  return (
    <table>
      <tbody>
        {props.rows.map((row) => (
          <tr>{props.renderRow(row)}</tr>
        ))}
      </tbody>
    </table>
  );
};

Then row will be infered as unknown

Can somebody help me why this is happening, and if this can be solved somehow?

I made a small repro on TS Playground with all the necessary code.