如何根据isActive状态在Styled Components中旋转图标？

你的代码不生效有两个核心问题：

1. Styled Components的样式回调接收的是props对象，而非直接的状态变量，你之前直接用(isActive)作为参数，实际是把整个props命名为isActive，无法正确获取状态值。
2. 你没有将isActive状态作为props传递给Styled.Icon组件，导致样式回调里根本拿不到这个状态。

正确实现步骤 #

1. 修正Styled Components的样式代码

可以用两种方式实现，推荐第二种（逻辑更清晰）：

方式一：条件判断添加样式

export const Icon = styled.div`
  padding: 20px 20px 0px 20px;
  // 从props中解构出isActive
  ${({ isActive }) => isActive && `
    transform: rotate(180deg);
    transition: transform 0.2s ease; // 可选：添加过渡动画让旋转更流畅
  `}
`;

方式二：三元表达式直接设置transform值

export const Icon = styled.div`
  padding: 20px 20px 0px 20px;
  // 根据isActive状态设置旋转角度
  transform: ${({ isActive }) => isActive ? 'rotate(180deg)' : 'rotate(0deg)'};
  transition: transform 0.2s ease; // 可选过渡动画
`;

2. 在组件中传递isActive props

必须把isActive状态传给Styled.Icon，这样样式回调才能拿到状态值：

<Styled.Icon
  isActive={isActive} // 关键：传递状态给styled组件
  color={isActive ? activeColor : color}
  activeColor={activeColor}
>
  <Icon name="arrowDown" />
</Styled.Icon>

额外说明 #

• 添加transition属性是为了让旋转动画更平滑，提升用户体验，不需要的话可以去掉。
• 确保你的isActive状态是正确管理的（比如用React的useState），否则样式不会随状态变化更新。

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