conditional rendering in styled components

Question

How can I use conditional rendering in styled-components to set my button class to active using styled-components in React?

In css I would do it similarly to this:<

Answer 1

I haven't seen this syntax, which I feel is the cleanest when you need to make a complete block conditional:

const StyledButton = styled(button)`
    display: flex;
    background-color: white;

    ${props => !props.disabled} {
        &:hover {
            background-color: red;
        }

        &:active {
            background-color: blue;
        }
    }
`;

So there's no need to close/open ticks to get it working.