如何根据isActive状态旋转图标?

Question

我确实有这样的图标组件:

<Styled.Icon
color={isActive ? activeColor : color}
activeColor={activeColor}
>
<Icon name="arrowDown" />
</Styled.Icon>

我需要根据isActive状态旋转这个图标。如何在样式组件中做到这一点?我尝试这样做:

export const Icon = styled.div`
${(isActive) =>
isActive &&
`
transform: rotate(180deg);
`}
padding: 20px 20px 0px 20px;
`

但它不起作用。如有任何帮助，不胜感激。

Answer 1

你可以传递一个道具给你的组件isActive作为一个例子，然后根据它的值设置css转换值。

<Styled.Icon
isActive={isActive}
>
<Icon name="arrowDown" />
</Styled.Icon>
export const Icon = styled.div`
transform: ${props => props.isActive ? "rotate(180deg)" : "rotate(0)"};
padding: 20px 20px 0px 20px;
`

这里是如何根据官方文档中的道具来调整你的风格。