Typescript styled-component error: “Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.”

Question

Getting a typescript error on my styled-component

Type \'{ children: string; }\' has no properties in common with type \'IntrinsicAttributes\'.ts(2559

Answer 1

I got this error:

Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts

When dynamically added tags in my react application. I found a great solution that has nothing to do with typescript or styled-components.

It is enough to create a node through React.createElement

For example:

const Title: React.SFC = ({ tag, styled, children }) =>
  React.createElement(tag, { ...styled }, children);

const TitleStyled = styled(Title)`Your styled`