如何用aphrodite覆蓋material-ui className？

Question

我正在使用React並設計一些圖標。我爲我的組件使用Material-UI庫。我正在使用的其中一個組件是FontIcon。它已經有一個className，我不能用我傳入的阿芙羅狄蒂風格來覆蓋。

<FontIcon className="material-icons"> 
    bug_report 
</FontIcon> 

如果我設置的樣式上這種控制，它工作正常：

<FontIcon className="material-icons" style={{ color: 'red' }}> 
    bug_report 
</FontIcon> 

你怎麼能蓋寫現有的類名？我試過了：

className={css(['material-icons', styles.colorize])} 
className={css('material-icons', styles.colorize)} 
className={('material-icons', css(styles.colorize))} 

謝謝！

Answer 1

問題是，此組件不允許傳遞自定義className屬性，只能使用style延伸，如您在其PropTypes definition中所見。

Material-ui使用JS形式的樣式，並不真正想要處理「正常」的CSS，即使我同意有時更容易覆蓋。

你可以將你的組件包裝在一個div中，你可以給你的自定義className並改變其風格。 Appart從做拉請求，沒有太多的選擇。