I’m getting the error below when I try to use logical && in a styled component prop
When I use the optional chaining “? :”, It works without any ts error but can’t use “&&”
Type 'false | InterpolationValue[] | undefined' is not assignable to type 'Interpolation<ThemedStyledProps<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & ContainerProps, any>>'.
Type 'undefined' is not assignable to type 'Interpolation<ThemedStyledProps<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & ContainerProps, any>>'
Below is my code:
const hoverfragment = css`
&:hover {
display: unset;
}
`;
interface ContainerProps {
selected?: boolean;
}
const container = styled.div<ContainerProps>`
display: flex;
flex-direction: row;
justify-content: space-between;
${({ selected }) => selected && hoverfragment}
`;