applying style using styled components if two classes - css

Question

I have a react app and I am trying to write a css rule like the following using styled components:
.react-draggable-transparent-selection .preview-wrapper:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(4px);
}
I am trying this but it does not seem to work:
const PreviewContainer = styled.div`
position: relative;
height: 100%;
flex-grow: 1;
& .react-draggable-transparent-selection {
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
backdrop-filter: blur(5px);
}
}
`;
the .react-draggable-transparent-selection class and .preview-wrapper are not on the same element. How can I write this using styled components?

Answer 1

Ok, I am pretty sure that styled components do not support applying a style based on an ancestor having a conditional css class based on this issue. I have opened my own github issue with styled components here, but in the mean time I solved this using state in react and passing as a prop like this:
const PreviewContainer = styled.div`
position: relative;
height: 100%;
flex-grow: 1;
${({ isDragging }) => isDragging &&
css`
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
backdrop-filter: blur(5px);
}
`
}
`;

Answer 2

Is the element with the class react-draggable-transparent-selection a child of the PreviewContainer? Something like the below?
<PreviewContainer>
...
<div className="react-draggable-transparent-selection">
</div>
...
</PreviewContainer>
If it is, this is how you would style it using Styled Components:
const PreviewContainer = styled.div`
position: relative;
height: 100%;
flex-grow: 1;
& .react-draggable-transparent-selection {
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
backdrop-filter: blur(5px);
}
}
`;