使用 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; `};