將材質圖標與樣式組件配合使用

Question

剛剛開始使用樣式組件進行遊戲。有沒有一種方式來設計第三方圖標，如Material Design Icons？這是迄今爲止的代碼，但顯然它不起作用。 相關代碼如下內容組件謝謝！

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

爲styled(AnyComp)符號工作AnyComp需要接受傳入className道具並將其附加到DOM節點。

對於示例工作MaterialIcon必須使用在className傳遞的，否則風格注入，但沒有DOM節點的目標是：

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

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

請參閱我們的documentation page about styling any component的詳細信息！