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

【问题标题】：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 属性。

标签： css reactjs typescript styled-components

【解决方案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>

【讨论】：

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