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

Ok like it was stated above just to clarify if you create a component

   <DeliverNow>

        </DeliverNow>

it automatically passes props to it and if when u declare it

const DeliverNow = () => {}

Typescript would tell you that they don't match cuz, in reality, DeliverNow takes in some props

so in actual sense, its meant to be

const DeliverNow = (props:any) => {}

Answer 2

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<TitleProps> = ({ tag, styled, children }) =>
  React.createElement(tag, { ...styled }, children);

const TitleStyled = styled(Title)`Your styled`

Answer 3

<Note>{props.message}</Note> is same as Note({ children: props.message }) so typescript is complaining that function Note doesn't take any arguments and function type doesn't match. It has nothing to do with styled-components.

(IntrinsicAttributes is probably the default interface you extend when you write a functional component. Or something like that idk xD)

My best guess is you want const Note = props.error ? NotificationError : NotificationSuccess; instead of what you have written.

PS. I might be wrong but I'm mostly sure this is the case.