Styled Components传递props时颜色逻辑出现反向问题求助

问题根源 #

你把variant属性传给了<Button>组件，但样式判断逻辑写在FindFormModal这个styled组件里——这里的props是FindFormModal自身接收的属性，和Button的variant完全无关。所以不管Button传了什么值，FindFormModal里的props.variant都是undefined，导致props.variant === 'colour'判断不成立，文本默认显示green；反过来写!==时，undefined不等于colour，判断成立显示blue，这就出现了和预期相反的结果。

解决方法 #

方法一：把Button封装成styled组件（推荐）

直接给Button做styled化，让它自己接收variant属性来控制样式：

// 定义StyledButton
export const StyledButton = styled.button`
  width: 35%;
  padding: 12px;
  color: ${props => props.variant === 'colour' ? 'blue' : 'green'};
  border-radius: 3px;
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 10px 0;
`

// 使用时
<StyledButton variant='colour' type="submit" form="myForm">
  Submit
</StyledButton>

方法二：把variant传给FindFormModal

如果必须在FindFormModal里控制Button样式，需要把variant属性传给FindFormModal，而不是Button：

// 使用FindFormModal时传递variant
<FindFormModal variant='colour'>
  {/* 其他模态框内容 */}
  <Button type="submit" form="myForm" className="submit-btn">
    Submit
  </Button>
</FindFormModal>

// 原FindFormModal的样式逻辑保持不变即可
export const FindFormModal = styled(Modal)`
  .submit-btn {
    width: 35%;
    padding: 12px;
    color: ${props => props.variant === 'colour' ? 'blue' : 'green'};
    border-radius: 3px;
    font-weight: 500;
    font-size: 16px;
    margin: 0px 0 10px 0;
  }
`

关键提醒 #

Styled Components的props只作用于当前被styled的组件本身，不会自动继承子组件的属性。如果要让父级styled组件的样式依赖某个参数，必须直接给这个styled组件传递对应的props。

内容的提问来源于stack exchange，提问作者Sins97