React Typescript prop работает нормально, но возвращает ошибку

Question

Я создал компонент, и я передаю реквизиты в стилизованные компоненты, он работает нормально, но сначала поддерживает всегда эту ошибку.

Компонент

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>
);

Использование:

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

Ошибка:

Answer 1

Поскольку вы передаете массив элементов в качестве дочерних элементов вашим WelcomeFullscreen компонентам в вашем файле Welcome.tsx где-то

Если вы определите свой WelcomeFullscreen компонент как фактический React FunctionComponent, children всегда допускается как prop.

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

Я ответил на аналогичный вопрос здесь: Ошибка TypeScript: свойство 'children' не существует для типа 'ReactNode' .

Answer 2

Вам, вероятно, нужно определить тип компонента, стилизованного с помощью styled-components

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

См. Документ Styled-Components с использованием пользовательских реквизитов с машинописью

Если вы передаете пользовательские свойства своему стилевому компоненту, рекомендуется передать аргументы типа теговому шаблону