关于React中样式化组件中缺少属性的Typescript错误

Question

我一直在遇到有关缺少属性的错误，特别是以下内容：

键入'{children：Element;键：数字； className：字符串； onClick：（）=>无效； }”缺少类型“ Pick，HTMLDivElement>

中的以下属性

而且我似乎无法弄清楚如何理解这个问题。

我已经尝试过将所有这些{children：Element;键：数字； className：字符串； onClick：（）=>无效； }，但无济于事。

import React from 'react';
import styled from 'styled-components';

interface BoxProps {
    width?: string;
    height?: string;
    num: number;
    chosen: number;
    title: string;
    value: string;
    className: string;
    key: number;
    showAccordion: (num: number) => void;
    onClick: (e: any) => void;
    children?: React.ReactNode;
}

const BoxContainer = styled.div<BoxProps>`
display: flex;
margin: 1em;
justify-content: center;
align-items: center;
width: ${p => p.width === p.width ? p.width : '8em'}
height: ${p => p.height === p.height ? p.height : '8em'};
padding: 10px;
box-shadow: 5px 8px 5px #888888;
border-radius: 5px;
color: white;
cursor: pointer;
font-weight: bold;
    &.large {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    &:nth-child(odd) {
        background: #00b2e3;
      }

    &:nth-child(even) {
        background: #44546A;
      }
    &:hover {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-transition: transform 0.3s ease-in-out;
        -moz-transition:transform 0.3s ease-in-out;
        -ms-transition:transform 0.3s ease-in-out;
    }
`;

const ItemText = styled.p`
margin: 0px 10px 0px 10px;
font-family: 'Agenda', san-serif;
font-size: 1.3em;
text-align: center;
`;

const Box: React.FC<BoxProps & { className: string }> = ({ 
                                            width, 
                                            height, 
                                            num, 
                                            chosen, 
                                            title, 
                                            showAccordion,
                                            ...props
                                        }) => {



    return (
        <BoxContainer key={num} 
            className={chosen === num ? 'large' : ''}
            onClick={() => showAccordion(num)}>
            <ItemText>{title}</ItemText></BoxContainer>
    )
}

export default Box;

错误消息是：键入'{children：Element;键：数字； className：字符串； onClick：（）=>无效； }”缺少类型“ Pick，HTMLDivElement>

中的以下属性