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

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