Pass a Styled Component as a prop in react

Question

I'm using styled-components for all of my styling and would like to know how I can pass a style through from my parent component footer.jsx to my re-usable child component contact as a prop.

I've tried a few different ways, passing a string through as a prop and then passing that into a styled component in contact to update the background-image{this.props.icon} but this doesn't work and the current way I've tried doesn't render anything as well.

https://www.webpackbin.com/bins/-Kg0-scl1gRf4UTOaK-Y

Footer.jsx

import React from 'react'
import styled from 'styled-components'
import Contact from '../../molecules/Contact'

const Icon1 = styled.span`
  margin-top:8.333333px;
  background:url(icon1.png);
  width:25px; 
  height:25px;
  `
const Icon2 = styled.span`
  margin-top:8.333333px;
  background:url(icon2.png);
  width:25px; 
  height:25px;
  `
export default class MainFooter extends React.Component { 
  render() {
    return (
      <Wrapper>
         <Contact icon={<Icon1 />} />
         <Contact icon={<Icon2 />} />
      </Wrapper>
    )
   }
  }

contact.jsx

export default class Contact extends React.Component {
 return (
  <A href="/">
    <Wrapper>
      <ColLeft> {this.props.icon}</ColLeft>
    </Wrapper>
  </A>
  )
}

}

To improve your chances of getting good answers, please update your question with a runnable minimal reproducible example using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX, loading external libs (via a CDN), etc.; here's how to do one. — T.J. Crowder

Andrew Andrew · Accepted Answer · 2017-03-24T16:28:28

In wbpackbin all correct, you just need to add display: block to your spans. In your variant you have two spans with height: 0. See screenshot http://prntscr.com/enzkiw

Pass a Styled Component as a prop in react

1 Answers