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

Posted 2023-03-15

【中文标题】如何使用带有样式组件的逻辑类

【英文标题】：How to use logic classes with styled components

【发布时间】：2021-12-11 22:51:11

【问题描述】：

我想用这个逻辑将对应的类应用到一个元素上：

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

但我使用的是样式化组件，我不明白如何使用逻辑来完全改变组件。有任何想法吗？我正在使用 Next.js

【参考方案1】：

您可以将函数（“插值”）传递给样式化组件的模板文字，以根据其 props 对其进行调整。

阅读样式化组件文档中的Adapting based on props 部分。你的情况，因为你没有提供代码的细节，我只能举个例子：

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