我正在尝试动态呈现一个样式化组件。在过去，这很容易做到，因为所有的样式声明都在组件内部完成。然而，现在我正在尝试保持关注点的分离。因此，我将CSS存储在一个外部文件中。这工作得很好，完成了工作，然而，现在我正在尝试基于 prop 动态地给字体上色。2我不确定该怎么做，一直在到处找。
下面是我的组件，它需要动态字体颜色。

<Styled.HeroHeadline as="h4">
  {parse(el.header)}
</Styled.HeroHeadline>

下面是我声明css的样式文件：

export const HeroHeadline = styled(Heading)`
  p,
  div,
  span,
  h4,
  h3 {
    display: block;
    color: {dynamicProp}

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

有人有意见吗？我会非常感激的。谢谢！
我试着添加find a way来将prop作为一个值存储在外部css文件中，但是不确定该怎么做。
我也搜索过，看看以前有没有人问过这个问题，但没有发现任何关于同一主题的问题。