javascript - ReactJs 风格的组件

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 个 Prop ，我需要根据这些 Prop 返回样式组件。

Answer 1

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

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

您将使用它们

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