如何为外部CSS文件中的Styled Component实现动态样式

1. 修改外部样式文件，接收props动态值 #

在你的HeroHeadline样式声明里，用模板字符串函数获取组件传递的props，替换掉原有的{dynamicProp}：

export const HeroHeadline = styled(Heading)`
  p,
  div,
  span,
  h4,
  h3 {
    display: block;
    // 通过函数接收props，textColor是自定义的props名，可按需修改
    color: ${props => props.textColor || '#333'}; // 后面的#333是默认颜色，可选

    @media (min-width: 992px) {
      font-size: var(--font-size-h1);
      letter-spacing: var(--letter-spacing-100);
      line-height: var(--line-height-h1);
      margin: 0;
      text-align: center;
    }
  }
`

2. 在组件中传递动态颜色props #

使用Styled.HeroHeadline时，直接通过props传入目标颜色值：

<Styled.HeroHeadline as="h4" textColor="#your-desired-color">
  {parse(el.header)}
</Styled.HeroHeadline>

原理说明 #

Styled Components的styled方法返回的是标准React组件，会自动接收你传递的所有props。你可以在样式模板字符串里通过${props => ...}的形式读取这些props值，实现动态样式——不管样式写在组件内还是外部文件，这个逻辑都通用。

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