如何使用带有样式组件的逻辑类

Question

我想使用以下逻辑将相应的类应用于元素:

<ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>

但是我正在使用样式组件，我不明白如何使用逻辑来完全改变组件。什么好主意吗?我正在使用Next.js

Answer 1

你可以将一个函数("interpolations")传递给样式化组件的模板文字，以根据它的props来调整它。

阅读style Component文档中的"基于props进行适配"一节。在您的例子中，因为您没有提供代码的细节，所以我只能给您一个示例:

const DropdownMenu = styled.div`
display: ${props => props.clicked ? "none" : "block"};
`;