function crawlChildren(props) {
  return React.Children.map(props.children, (component, index) => {
    if (component.props.children) {
      crawlChildren(component.props.children)
    }

    // makes a copy of it, since it cannot be changed
    const cloned = React.cloneElement(component, component.props, component.props.children)

    if (component.key === 'header') {
      // renderHeader
    }
    // could get the styles for a certain area - like from the key
    const styles = styled.css `
      ${cloned} {
        color: blue;
        ${HeaderSectionArea.css};
      }
    `
    // we can styled.injectGlobal as well or use styled.withComponent, a few ways
    const Styles = () => <style dangerouslySetInnerHTML={{__html: styles.toString()}} />

    return <React.Fragment><Styles />{cloned}</React.Fragment>
  })
}

class Template {
  render() {
    return <React.Fragment>{crawlChildren(this.props)}</React.Fragment>
  }
}

<Template>
  <Header key="header" /> 
  <Aside key="sidebar" />
  <Main key="main">
    // <header key="header" />  
  </Main>
  <Footer key="footer" />
</Template>