![](/img/trans.png)
[英]How to inherit styles of an element from another file in styled-components
[英]Styled components not overriding styles from another component
我有一个已经像这样构建的组件:
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: ...
}
`;
但是,这些都没有发生。 我以为是因为它嵌套在里面? 我可以覆盖样式吗? 还是我应该建立一个类似的组件?
如果要对自己的自定义组件之一进行样式设置,则必须确保使用样式化组件提供给component的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: ...
}
`;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.