margin-top style is not being applied to the component. I don't quite understand what I'm missing here.
Home.js
const BannerSd = styled(Banner)`
margin-top: 15%;
`;
class Home extends Component {
render() {
return(
<div>
<BannerSd/>
<Content/>
</div>
);
}
}
export default Home;
Banner.js
function Banner() {
return (
<div>
<h1>Title</h1>
<h3>SubTitle</h3>
</div>
);
}
export default Banner;
You need to pass the className down to the Banner component, as described in the styled-components docs.
function Banner({className}) {
return (
<div className={className}>
<h1>Title</h1>
<h3>SubTitle</h3>
</div>
);
}
export default Banner;Edit: Wrong link
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句