React Typescript prop works fine, but returns error

Question

I created component and I'm passing props to styled components, it works fine, but at first prop it always get this error.

Component

type WelcomeProps = { 
    image: String,
    color: String
}

const StyledWelcome = styled.section`
    width: 100vw;
    height: 100vh;
    background-color: ${props => props.color};
    background: ${props => `url(${props.image}) no-repeat center`};
    display: flex;
    flex-direction: column;
    justify-content: center;
`


const WelcomeContainer = styled.div`
    width: 1350px;
    margin: 0 auto;
`

export const WelcomeFullscreen = (props: WelcomeProps) => (
    <StyledWelcome image={props.image} color={props.color}>
        <WelcomeContainer/>
    </StyledWelcome>
);

Usage:

<WelcomeFullscreen image={HomepageImage} color="#000">

Error:

Answer 1

Because you're passing an array of elements as children to your WelcomeFullscreen components in your Welcome.tsx file somewhere

If you define your WelcomeFullscreen component as an actual React FunctionComponent, children is always allowed as prop.

const WelcomeFullscreen: React.FC<WelcomeProps> = (props) => ()...

I answered a similar question here: TypeScript error: Property 'children' does not exist on type 'ReactNode' .

Answer 2

You probably need to define the type of the component styled by styled-components

const StyledWelcome = styled(div)<WelcomeProps>`
  ...
`

Refer: styled-components document of using custom props with typescript

If you are passing custom properties to your styled component it's a good idea to pass type arguments to tagged template