使用 Styled-Components 检查多个道具

Question

使用 styled-components，我可以检查布尔属性是否为 true，然后添加如下 css：

const Box = styled.div`
  ${({ someProp }) =>
    someProp &&
    css`
      border: none;
  `};
`

但是如果我想检查多个条件怎么办？例如，我想检查someProp 是否为true 和someOtherProp 是否为false，我该怎么做？

我正在考虑做这样的事情，但语法似乎不正确：

const Box = styled.div`
  ${({ someProp, someOtherProp }) =>
    someProp && !someOtherProp
    css`
      border: 1px solid red;
  `};
`

Answer 1

const Box = styled.div`
  ${({ someProp, someOtherProp }) =>
    someProp && !someOtherProp &&
    css`
      border: 1px solid red;
  `};