使用 Styled-Components 检查多个道具

Question

使用样式化组件，我可以检查布尔属性是否为 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;
  `};

Check multiple props with Styled-Components