반응에서 소품으로 스타일이 지정된 구성 요소 전달

Question

모든 스타일링에 스타일이 지정된 구성 요소를 사용하고 있으며 어떻게 부모 구성 요소 footer.jsx에서 재사용 가능한 하위 구성 요소로 스타일을 전달할 수 있는지 알고 싶습니다. 소품으로 연락하십시오.

나는 소품으로 문자열을 전달한 다음이를 background-image{this.props.icon}을 업데이트하기 위해 연락처의 스타일이 지정된 구성 요소로 전달했지만이 방법은 작동하지 않으며 현재 시도한 방법과 달리 ' t 아무것도 렌더링합니다.

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

} 모든 올바른을 wbpackbin에서

Answer 1

, 당신은 당신의 스팬에 display: block를 추가해야합니다. 귀하의 변형에서 height: 0과 2 개의 범위가 있습니다. screenshot http://prntscr.com/enzkiw