How to rotate an image in an after pseudoelement with styled components - css

Question

I have a dropdown menu with an arrow in the after pseudo element that i want to rotate when clicked.
here is the styled component:
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;
}
`;
This is the React.ts component
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>
);
};
I've tried the "data-attribute" trick but it doesn't work. And beacuse i'm using styled-components i don't know how can I use premade classes.

Answer 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>