定義済みのコンポーネントスタイルが機能しない

Question

margin-topスタイルがコンポーネントに適用されていません。私はここで何が欠けているのかよく分かりません。

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; 

Answer 1

あなたはstyled-components docsで説明したように、バナーコンポーネントまでclassNameを渡す必要があります。

function Banner({className}) { 
 
    return (
 
     <div className={className}> 
 
      <h1>Title</h1> 
 
      <h3>SubTitle</h3> 
 
     </div> 
 
    ); 
 
} 
 

 
export default Banner;

編集：間違ったリンク