如何禁用shadcn/ui Collapsible组件中TiTick图标的旋转效果

问题代码 #

<CollapsibleTrigger className="w-full text-[rgb(221,103,95)]">
    <div className="flex justify-between">
        <div className="flex items-center">
            <TiTick className="p-0.5 bg-[#61b00f]  rounded-full text-white text-xl me-2" />
            <h5 className="text-black font-medium text-xl">Trip Details</h5>
        </div>
        <div>
            <IoIosArrowDown />
        </div>
   </div>
</CollapsibleTrigger>

问题：点击CollapsibleTrigger时，TiTick和IoIosArrowDown两个图标都会旋转，需要仅保留箭头图标的旋转效果，禁用对勾图标的旋转。

解决方案 #

方法1：CSS抵消对勾图标旋转

Collapsible组件通常会给触发元素添加旋转类（比如rotate-180），导致子元素继承旋转效果。给TiTick添加反向旋转样式即可抵消：

<TiTick className="p-0.5 bg-[#61b00f] rounded-full text-white text-xl me-2 [&.collapsible-open]:rotate-[-180deg]" />

如果用自定义CSS：

.collapsible-trigger .ti-tick-icon {
  transform: rotate(-180deg) !important;
}

然后给对勾图标加类名：

<TiTick className="ti-tick-icon p-0.5 bg-[#61b00f] rounded-full text-white text-xl me-2" />

方法2：将对勾图标移出旋转触发范围

把TiTick放在CollapsibleTrigger外部，避免继承旋转样式：

<div className="flex items-center">
    <TiTick className="p-0.5 bg-[#61b00f] rounded-full text-white text-xl me-2" />
    <CollapsibleTrigger className="w-full text-[rgb(221,103,95)]">
        <div className="flex justify-between">
            <h5 className="text-black font-medium text-xl">Trip Details</h5>
            <div>
                <IoIosArrowDown />
            </div>
       </div>
    </CollapsibleTrigger>
</div>

方法3：手动控制箭头旋转

通过Collapsible的open状态，仅给箭头添加旋转类：

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger className="w-full text-[rgb(221,103,95)]">
      <div className="flex justify-between">
          <div className="flex items-center">
              <TiTick className="p-0.5 bg-[#61b00f] rounded-full text-white text-xl me-2" />
              <h5 className="text-black font-medium text-xl">Trip Details</h5>
          </div>
          <div className="transition-transform duration-200">
              <IoIosArrowDown className={open ? "rotate-180" : ""} />
          </div>
     </div>
  </CollapsibleTrigger>
  {/* 折叠内容 */}
</Collapsible>

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