减少样式组件中的重复代码

Question

我在一个 React 项目中使用样式组件，想知道是否有一种方法可以减少这 3 个重复的块，唯一的区别是边框的颜色。

最初，我正在考虑创建一个对象来映射可能的警报值（成功、警告、危险），并添加适当的颜色作为它们的键，但是我不确定将该对象放在哪里。

const customStyles = {

  ${({ alert }) =>
    alert === "success" &&
    css`
      border: 1px solid green;
  `}

  ${({ alert }) =>
    alert === "warning" &&
    css`
      border: 1px solid orange;
  `}

  ${({ alert }) =>
    alert === "danger" &&
    css`
      border: 1px solid red;
  `}

}

const Input = styled.input`
  ${customStyles}
`;

Answer 1

您可以重用一个根据值返回正确颜色的函数怎么样？

像这样的事情：

function getAlertColor(alert){
  switch (alert) {
    case "success":
      return "green"
    case "warning":
      return "orange"
    case "danger":
      return "red"
  }
}

const Input = styled.input`
  border: ${props => `1px solid ${getAlertColor(props.alert)};`};
`;