TypeScript props and HTML attributes collisions

• emotion version: 10.0.0
• react version: ^16

Relevant code:

type Props = {
  color: string | string [];
}

const MyComponent = styled('div')<Props>`
  color: pink;
`;

What you did:

I want a prop that coincides with the name of an attribute on the HTMLElement type (i.e.: color exists on a div element as a type string, but I want a prop called color which could be either a string or a string[]). For a little bit of more context, this is how styled-system works with its exported style prop color and type ColorProps.

What happened:

The relevant debugging information is Type 'string | string[]' is not assignable to type 'string'.

Reproduction:

Simply copy the code snippet above into your editor.

Problem description:

I’m rendered unable to type this component without renaming that prop, which I really don’t want to do because that breaks the styled-system contract.

Suggested solution:

No ideas! Any help welcome.

[immasandwich]

Our workaround is:

const MyComponent = styled<'div', Props>('div')`
  color: pink;
`;

…which allows the ExtraProps to override the attributes on a div element.

[potty]

For me, the solution was to use Radix https://github.com/modulz/radix instead of styled-system directly. Radix uses some parts of styled-system and has better TS support.