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

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

你可以重复使用 returns 基于值的正确颜色的函数怎么样？

像这样：

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)};`};
`;

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

Reducing Repetitive Code Within Styled-components

javascript

reactjs

styled-components