Quiero usar esta lógica para aplicar la clase correspondiente a un elemento:
<ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>Pero estoy usando componentes con estilo, no entiendo cómo puedo usar la lógica para cambiar totalmente el componente. ¿Algunas ideas? Estoy usando Next.js
Puede pasar una función ("interpolaciones") al literal de plantilla de un componente con estilo para adaptarlo en función de sus accesorios.
Lea esta sección, Adaptación basada en props , en la documentación de Componente con estilo. En tu caso, debido a que no proporcionaste los detalles del código, solo puedo darte un ejemplo:
const DropdownMenu = styled.div` display: ${props => props.clicked ? "none" : "block"}; `;