ReactJs StyledComponents

Question

我想使用一个属性来返回样式按钮。我正在寻找类似的东西：

const Button = styled.button`
 /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export default Button;  

不幸的是，我有超过2个道具，我需要返回样式组件。

Answer 1

您始终可以将对象作为属性传递。

<Button myStyle={ { color: color ... } } />

您将使用它们作为

const Button = styled.button`
  color: ${props => props.myStyle && props.myStyle.color ? props.myStyle.color : 'somethingdefault'};
`;

Answer 2

感谢提示，我使用函数来确定要设置的颜色。

     function getColor(props){
          if(props.btn==='red'){return 'red';}
      }    


     color: ${(props) => getColor(props)};