定义的组件样式不起作用

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 传递给 Banner 组件，如 styled-components docs 中所述。

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

export default Banner;

编辑：错误link

定义的组件样式不起作用

Defined component style not working

reactjs

styled-components