Javascript 已设置样式的组件不覆盖其他组件的样式

我有一个组件，它是这样构建的：

const Banner = ({ image, heading, text }) => (
  <Container>
    <Background src={image}>
      <BannerContent>
        <h1>{heading}</h1>
        <h2>{text}</h2>
      </BannerContent>
    </Background>
  </Container>
);

const BannerContent = styled.div`
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 16px;
  }
`;

---

然而，所有这些都没有发生。我猜是因为它嵌套在那里？我能覆盖这些样式吗？或者我应该只构建一个与之类似的组件吗？

如果您正在设计自己的自定义组件，则必须确保使用

const Banner=（{image，heading，text，className}）=>(
{标题}
{text}
);
const PageBanner=已设置样式（横幅）`
h1{
字体大小：20px；
宽度：。。。
}
氢{
字体大小：13px；
宽度：。。。
}
`;

这是否意味着我必须在

PageBanner

中输入类名？类似于

@Spacebear5000不，这只是意味着样式化组件将在引擎盖下创建一个新的类名，并将其发送到包装的
横幅
组件。你只需要确保你使用的是
className
prop，它是提供给
Banner
组件的。我在这方面浪费了太多时间，我甚至阅读了文档的那部分，但没有真正理解它。尽管如此，我才刚刚开始学习如何反应，所以谢谢你，@Tholle！
const PageBanner = styled(Banner)`
  h1 {
    font-size: 20px;
    width: ...
  }

  h2 {
    font-size: 13px;
    width: ...
  }
`;

const Banner = ({ image, heading, text, className }) => (
  <Container className={className}>
    <Background src={image}>
      <BannerContent>
        <h1>{heading}</h1>
        <h2>{text}</h2>
      </BannerContent>
    </Background>
  </Container>
);

const PageBanner = styled(Banner)`
  h1 {
    font-size: 20px;
    width: ...
  }

  h2 {
    font-size: 13px;
    width: ...
  }
`;