Search code examples
reactjsstyled-components

Defined component style not working

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;
Solution

  • 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