通过在样式化组件中使用父级属性来更改子样式

Question

在样式化的组件中，我有一个条件： 1.单击时，必须选择div-完成 2.并且div内的段落必须为红色

<Selectabledivs selected={isSomethingSelected(offer)} >
                            <p>This paragraph must be in red</p>

                        </Selectabledivs>

这是我的CSS：

const Selectabledivs = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-width: 1px;
    border-style: solid;
    width: 160px;
    height: 80px;
    background-color: ${prop("theme.white")}
    border-color: ${({ theme, selected }) => (selected ? "blue" : "gray")};
    cursor: pointer;

`;

选择div时如何将段落设为红色？

我尝试过：

> p {
        color:${({ theme, selected }) => (selected ? "red" : "black")};
    }

但这不起作用。 感谢您的帮助。