如何使用样式组件在伪元素后旋转图像

Posted 2023-03-13

【中文标题】如何使用样式组件在伪元素后旋转图像

【英文标题】：How to rotate an image in an after pseudoelement with styled components

【发布时间】：2021-06-08 11:15:42

【问题描述】：

我有一个下拉菜单，后面的伪元素中有一个箭头，我想在单击时旋转。

这是样式化组件：

    export const Header = styled.div`
          padding: 0.2rem 0.5rem;
          &:after 
            content: url($arrowUp);
            height: 100%;
            width: 15px;
            text-align: right;
            float: right;
            transform: rotate(180deg);
  
  &:hover 
    cursor: pointer;
  
`;

这是 React.ts 组件

export const AttributeValuesChecklist: React.FC<IProps> = (
  title,
  name,
  values,
  valuesShowLimit = false,
  valuesShowLimitNumber = 5,
  onValueClick,
: IProps) => 
  const [viewAllOptions, setViewAllOptions] = React.useState(!valuesShowLimit);

  const showAttributeList = e => 
    const actualDisplay = e.target.parentNode.children[1].style.display;
    if (actualDisplay === "block") 
      e.target.parentNode.children[1].style.display = "none";
     else 
      e.target.parentNode.children[1].style.display = "block";
    

  ;

  return (
    <S.Wrapper>
      title && (
        <S.Header onClick=e => showAttributeList(e)>title</S.Header>
      )
      <DropMenu>
        values &&
          values.map((value, index) => 
            if (!viewAllOptions && index > valuesShowLimitNumber - 1) 
              return <></>;
            
            return (
              <Checkbox
                name=name
                checked=!!value.selected
                onChange=() => onValueClick(value)
              >
                value && value.name
              </Checkbox>
            );
          )
      </DropMenu>
      <S.BottomBorder />
    </S.Wrapper>
  );
;

我尝试了“数据属性”技巧，但它不起作用。因为我正在使用样式组件，所以我不知道如何使用预制类。

【问题讨论】：

箭头成功出现了吗？

是的，箭头确实出现了，并且带有原始旋转。我只是不知道如何用 JS 更改 after 属性。

【参考方案1】：

//styled-component
export const Header = styled.div<isClicked: boolean>`
          padding: 0.2rem 0.5rem;
          &:after 
            content: url($arrowUp);
            height: 100%;
            width: 15px;
            text-align: right;
            float: right;
            transform: $props => props.isClicked ? rotate(180deg) : rotate(0deg);
  
`;

//component 
//you can make a state to store the value or pass from props
 <S.Header isClicked=//boolean value>title</S.Header>

【讨论】：

喜欢它。我现在知道我可以将道具传递给样式化组件。谢谢。