如何在Qwik中编写动态CSS？附Next.js示例对比

方法一：直接条件赋值style属性 #

在Qwik中，不要通过空对象来清空样式，而是直接针对单个样式属性做条件判断。当isOpen为true时，将transform设为undefined（会被Qwik自动忽略），反之设置旋转值即可：

<div
  class="bg-white origin-top transition-all duration-300 absolute z-50 w-full"
  style={{ transform: isOpen ? undefined : 'rotateX(90deg)' }}
>

方法二：通过类名切换实现（推荐） #

更贴合Qwik组件开发风格的方式是用类名动态切换，避免直接操作内联样式：

1. 先在样式文件中定义关闭状态的类：

.rotate-closed {
  transform: rotateX(90deg);
}

2. 在组件中条件拼接类名：

<div
  class={`bg-white origin-top transition-all duration-300 absolute z-50 w-full ${isOpen ? '' : 'rotate-closed'}`}
>

关键注意点 #

确保isOpen是Qwik的响应式信号（通过useSignal创建），这样状态变化才能触发视图更新：

import { useSignal } from '@builder.io/qwik';

export default component$(() => {
  const isOpen = useSignal(false);
  
  // 业务逻辑代码
  
  return (
    // 上述div代码
  );
});

内容的提问来源于stack exchange，提问作者Big boy