Реквизиты 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 dev. Где я все испортил?

Редактировать: Решение, передать реквизиты в Shape с <Shape {...props}/>

Answer 1

Реквизиты также должны быть переданы в Shape:

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

Вы должны понимать, что когда вы передаете его в shape, вы все еще не находитесь внутри стилизованного объекта div, стилизованного объекта div. это создает экземпляр компонента Shape внутри shape, реквизиты внутри shape находятся вне области действия Shape, поэтому вы должны передать их Shape.