定义的组件样式不起作用

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

您需要将className向下传递给横幅广告组件，如styled-components docs中所述。

＆＃13;

＆＃13;

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

export default Banner;

＆＃13;

＆＃13;

＆＃13;

修改：链接错误