【问题标题】：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
【问题讨论】：
标签：
javascript
reactjs
next.js
styled-components
【解决方案1】：
您可以将函数（“插值”）传递给样式化组件的模板文字，以根据其 props 对其进行调整。
阅读样式化组件文档中的Adapting based on props 部分。你的情况，因为你没有提供代码的细节，我只能举个例子：
const DropdownMenu = styled.div`
display: ${props => props.clicked ? "none" : "block"};
`;