反応の小道具としてスタイルを適用したコンポーネントを渡す

Question

私はすべてのスタイリングにスタイリッシュなコンポーネントを使用しています。親コンポーネントのfooter.jsxから再利用可能な子コンポーネントにスタイルを渡す方法を知りたい小道具としての接触。

私は小道具として文字列を渡してから、background-image{this.props.icon}を更新する連絡先のスタイル付きコンポーネントに渡しましたが、これはうまくいかず、何もレンダリングしません。すべての正しいをwbpackbinで

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> 
) 
} 

}

Answer 1

、あなたは自分のスパンにdisplay: blockを追加する必要があります。あなたのバリアントには、height: 0という2つのスパンがあります。 スクリーンショットを見るhttp://prntscr.com/enzkiw