將className prop傳遞給Material-ui子/內部元素

是否可以將css類指定給Material-UI組件的內部元素。以<RaisedButton />組件爲例，假設我想將一個className應用於Raised Button中的標籤元素。將className prop傳遞給Material-ui子/內部元素

<RaisedButton labelStyle={{...}}。

由於labelStyle正在尋找一個對象，我將如何應用自定義css類而不是添加內聯代碼？

來源

2017-01-04 Michael Stearn

其他答案相似，但你可以通過一個<span>元素作爲label屬性，而不是作爲一個孩子：

<RaisedButton label={<span className="your-class">Your label</span>} />

這可保持RaisedButton應用內嵌樣式/主題。

https://jsfiddle.net/L8d2b1y7/1/

來源

2017-01-04 22:34:16

謝謝傑夫！你的回答提醒我，很久以前，我在AppBar組件中用了另一個文件中的iconElementLeft/Right道具。我想我的大腦只是拒絕在不同的環境下提供這種聯繫。 –

認爲你可以通過標籤作爲一個孩子，而不是在道具。

<RaisedButton> 
 
    <span className="your-class>Your label</span> 
 
</RaisedButton>

通過className丙爲RaisedButton僅適用於根元素。

來源

2017-01-04 22:18:14 Tom

雖然可行，一會又具有無的標籤樣式，材料的UI優惠。我想我應該更具體一點，我希望能夠保持這些風格，而添加/覆蓋樣式而不是內聯。關於最後一行，你說沒有辦法將該道具傳遞給子元素？ –

Tom的回答是正確的，但您也可以使用標籤屬性... 您的標籤} /> ...如果您想利用主題/應用RaisedButton的樣式（例如，它應用的「font-size」和「text-transform」）應用於您的css類之前。實際上，你可能不希望那些用你的css類應用的樣式構建 - 如果不是這樣，那麼把跨度當成湯姆建議的那麼小。 –

將className prop傳遞給Material-ui子/內部元素

回答

相關問題