With styled-components, I am able to check if a boolean prop is true, then add css like below:
const Box = styled.div`
${({ someProp }) =>
someProp &&
css`
border: none;
`};
`
But what if I want to check multiple conditions? For instance, I want to check if someProp is true AND someOtherProp is false, how would I go about doing that?
I'm thinking doing something like this but syntax does not appear to be correct:
const Box = styled.div`
${({ someProp, someOtherProp }) =>
someProp && !someOtherProp
css`
border: 1px solid red;
`};
`
const Box = styled.div`
${({ someProp, someOtherProp }) =>
someProp && !someOtherProp &&
css`
border: 1px solid red;
`};