如何使用 react 和 typescript 评估传递给样式化组件的 prop？

Question

如果 state active 为 true，我想为样式化组件 div 添加背景颜色。

我就是这样做的

function Main() {
    const [active, setActive] = useState(false);
    return (
        <ChildComponent 
            active={active}/>
    );
}


const ChildComponent = styled.div<{ active?: boolean }>`
    height: 100%;
    ${({ active }) => active && 'background-color: grey';}
`;

这很好用。但不仅仅是将字符串灰色传递给背景颜色，我还想传递如下所示的道具。

const ChildComponent = styled.div<{ active?: boolean }>`
    height: 100%;
    ${({ active }) => active && 'background-color:'${(props: any) => 
    props.theme.colors.grey.light3}};

`;

这不是正确的语法。有人可以帮我解决这个问题吗？谢谢。

Answer 1

您可以将模板文字嵌套在模板文字中，只要它们位于插值表达式块 (${...}) 内。

所以你的代码应该是这样的：

const ChildComponent = styled.div<{ active?: boolean }>`
    height: 100%;
    ${({ active, ...props }) => active && `background-color: ${(props: any) => 
    props.theme.colors.grey.light3}`};

`;