样式化的组件不会覆盖来自另一个组件的样式

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 prop that styled components gives to the component。

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