Styled-components 道具被传递但不适应

Question

const Shape = styled.div`
background-color: ${props => props.bgColor || 'red'};
`

function shape(props) {
    console.log(props.bgColor || 'red')

    return (
        <Shape>    
        </Shape>
    )    
}

我通过扩展运算符传递以下道具。

let square2x2 = { bgColor: "blue"}

<Shape {...square2x2}></Shape>

console.log 显示 props.bgColor 存在并返回蓝色。但是该元素仍然是红色的。我还通过 React 开发工具确认了 props 的存在。我在哪里搞砸了？

编辑：解决方案，使用 <Shape {...props}/> 将道具传递给 Shape

Answer 1

道具也必须传递给Shape：

function shape(props) {    
    return (
        <Shape bgColor={props.bgColor} />
    )    
}

您需要了解，当您将其传递给shape 时，您仍然不在样式化的 div 对象中，实例化组件的样式化 div 对象是shape 内部的Shape，shape 内部的道具不在Shape 的范围内，所以必须将它们传递给Shape 才能。