Search code examples
reactjsstyled-components

styled-components — how to use :not() selector on a prop?

Let's say I have an element with a property "selected":

<Button selected>
    Text
</Button>

const Button = styled.div`
    &:not(???) {
        color: red;
    }
`;

How do I select all instances of Button which don't have the "selected" property?

Maybe there is another way to do what I'm trying to achieve?

Сlarification edit:

I actually need to use :not together with :hover, like this:

const Button = styled.div`
    &:not(???):hover {
        color: red;
    }
`;
Solution

  • That's how you can do it:

    const Button = styled.div`
    ${props => !props.selected && css`
        :hover {
            color: red;
        }`
    }
`;

    Don't forget to import css from styled-components;