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

{props.message} 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.