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

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

但是，none 正在发生。我假设这是因为它嵌套在那里？我可以覆盖样式吗？或者我应该构建一个类似的组件吗？

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

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

Styled components not overriding styles from another component

javascript

reactjs

styled-components