スタイル付きコンポーネントでの素材アイコンの使用

Question

Styled Componentsでの再生を開始したばかりです。マテリアルデザインアイコンなどのサードパーティのアイコンをスタイルする方法はありますか？これは私がこれまで持っていたコードですが、明らかに動作していません。 Relavantコードが下にありますコンテンツコンポーネントありがとう！着信className支柱を受け入れ、DOMノードにアタッチするAnyCompニーズを動作させるstyled(AnyComp)表記について

const MaterialIcon = (props) => <i className="material-icons">account_balance</i>; 

const Icon = styled(MaterialIcon)` 
    background-color: green; 
    font-size: 50px; 
`; 

const CheckThisOut = props => (
    <Wrapper> 
    <Header> 
     <h5>{props.title}</h5> 
     <Icon /> 
    </Header> 
    <Divider /> 
    <Content> 
     <p>5% of all participants in this campaign were first time users.</p> 
    </Content> 
    </Wrapper> 
); 

export default CheckThisOut; 

Answer 1

。詳細については、当社のdocumentation page about styling any componentを参照してください

const MaterialIcon = (props) => (
    <i className={`material-icons ${props.className}`}>account_balance</i> 
); 

// WORKS 
const Icon = styled(MaterialIcon)` 
    background-color: green; 
    font-size: 50px; 
`; 

：MaterialIconを動作するように例えば

は、classNameに渡さ使用する必要がありそうでないスタイルが注入されているが、何のDOMノードが対象とされていません！