样式化的组件不会覆盖其他组件的样式

Question

我有一个已经像这样构建的组件：

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

并且我试图覆盖和的样式，h1并h2在另一个组件中添加新样式，如下所示：

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

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

但是，这些都没有发生。我以为是因为它嵌套在里面？我可以覆盖样式吗？还是我应该建立一个类似的组件？

Answer 1

如果要对自己的自定义组件之一进行样式设置，则必须确保使用className样式化组件提供给组件的属性。

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: ...
  }
`;