gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 07:17:09 24 4
gpt4 key购买 nike

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

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

然而,这一切都没有发生。我假设它是因为它嵌套在那里?我可以覆盖样式吗?或者我应该只构建一个类似的组件吗?

最佳答案

如果您正在为自己的自定义组件之一设置样式,则必须确保使用 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: ...
}
`;

关于javascript - 样式化的组件不会覆盖来自另一个组件的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51636412/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com