javascript - 样式组件中的多个 Prop 检查

Question

我知道在样式组件中，我可以像这样检查 prop:

${props => { if (props.size)...返回...

但是，据我所知，如果我想进行第二次 Prop 检查，那么我需要重新开始:

${props => { if (props.color)...返回...

我想知道是否有一种方法可以只执行一个 ${props... 对于不同情况有不同的返回？

如果是这样，知道如何做吗？

谢谢。

Answer 1

您可以通过预先访问 props 对象来简化一些。这样重复次数会少一些。

const StyledComponent = styled.div(
  (props) => `
    background-color: green;

    ${props.warn && `
      background-color: yellow;
    `}

    ${props.alert && `
      background-color: red;
    `}

  `
);