styled components nested components code example

Example: styled components nested components

import React from "react"
import styled from 'styled-components'

const Button = (props) => (
  <button className={props.className}></button>
)

const StyledButton = styled(Button)``

const HeaderWrapper = styled.div`
  font-size: xx-large;
  font-weight:bold;
  color: brown;

  ${StyledButton}{
    height:100px;
    background-color: blue;
  }
`

const Header = () => (
  <HeaderWrapper>
    <StyledButton></StyledButton>
	Lorem Ipsum
  </HeaderWrapper>
)

export default Header