Material UI內聯樣式不起作用

在Material UI中，我想在按鈕上設置borderRadius。通過style屬性似乎適用於FlatButton，但不適用於RaisedButton。Material UI內聯樣式不起作用

對於RaisedButton的borderRadius應用於父<div>（這是必要的），但不<button>本身（這也是必要的）

這是在材質UI中的錯誤？或者這是行爲的目的？如果是有意的，那麼我該如何製作一個帶圓角的RaisedButton？

import React from 'react'; 
import RaisedButton from 'material-ui/lib/raised-button'; 
import FlatButton from 'material-ui/lib/flat-button'; 

export default class MyButtons extends React.Component { 

    render() { 
    return (
     <div> 
     <FlatButton label="flat button" style={{borderRadius: '25px'}}/> {/*works*/} 
     <RaisedButton label="raised button" style={{borderRadius: '25px'}} /> {/*does not work*/} 
     </div> 
    ); 
    }; 
}

來源

2016-01-13 Sida Zhou

這是預期行爲，而says so in the docs。爲了記錄，你永遠不會想要一個style道具被傳遞給多個孩子，因爲沒有哪種風格對所有的孩子都有意義 - 你應用它們的嵌套有多深？

但我認爲你在這裏混合關注。在組件上使用style組件應該只會影響根元素 - 假設開發人員選擇傳遞樣式標記which they did。

但你希望做的是沒有風格的組件，但風格的元素組件什麼。你想要做的是使用CSS類：

<RaisedButton label="raised button" className="raised-button--rounded" />

.raised-button--rounded, .raised-button--rounded button { border-radius: 25px; /* assuming one is not already defined */ }

NB：開發商不打算爲你改變，他們沒有專門曝光的組件樣式。通過這種方法，您最終會遇到問題。

來源

2016-01-13 21:28:29

我同意你原則上的說法。在實踐中，我只是想要圓角。我的期望是，當我傳遞'style'屬性時，根組件應該知道哪個孩子需要該樣式，並且知道應該應用多深。如果組件不這樣做，那麼你不會說這種行爲是意外的嗎？ –

在此特定示例中，此答案中提供的代碼不起作用（「material-ui」：「^ 0.14.2」）border-radius已經內聯定義，是否意味着無法更改它？（除了使用！important） –

這不是一個合理的期望，我懷疑你永遠不會在你使用的任何組件庫中找到這個功能。圖書館要麼（a）必須明確支持圓角，歡迎與開發人員一起討論（儘管它不是MD規範的一部分）;或（b）必須考慮每一個**可能的** CSS屬性，並解析出哪些發送給哪些子組件。後者是不合理的。爲了記錄，這是許多人反對在React中使用內聯樣式的原因之一。有了課程，解決方案是微不足道的。 –

Material UI內聯樣式不起作用

回答

相關問題