How do you do conditional hovering in styled components?

Question

I have a component that based on certain props I want the ability to change the background on hover. but based on other props, hover should do nothing. is this possible?

export const Container = styled.div`

    &:hover {
        background: ${({ shouldHover }) => shouldHover ? 'red' : '' };
    }
`

however this does not work. any suggestions how this can be done?

Answer 1

This will work:

export const Container = styled.div`
    ${ props => props.shouldHover 
        ? '&:hover { background: red }' 
        : ''
    }
`;