如何將Material-UI FlatButton CSS傳遞到其他按鈕組件

Question

我在我的網站（https://github.com/mathieudutour/react-progress-button）中使用了一個加載按鈕對象，並且試圖將Material-UI FlatButton CSS傳遞給它，以便它看起來像與FlatButton相同。但是，我不知道如何做到這一點。

import ProgressButton from 'react-progress-button' 

const App = React.createClass({ 
    getInitialState() { 
    return { 
     buttonState: '' 
    } 
    }, 

    render() { 
    return (
     <div> 
     <ProgressButton onClick={this.handleClick} state={this.state.buttonState} 
style={//flat button CSS goes here.....}> 
      Go! 
     </ProgressButton> 
     </div> 
    ) 
    }, 

    handleClick() { 
    this.setState({buttonState: 'loading'}) 
    // make asynchronous call 
    setTimeout(() => { 
     this.setState({buttonState: 'success'}) 
    }, 3000) 
    } 
}) 

感謝您的幫助。

Answer 1

您可以創建一個不可見的扁平按鈕，並通過使用喜歡的事，得到的樣式：

<FlatButton id="mock1"/> 
let flatButtonStyle = window.getComputedStyle(document.getElementById('mock1')); 

然後將其分配給<ProgressButton>。您可能需要稍微修改CSS樣式對象，因爲它會返回所有計算樣式。

<ProgressButton onClick={this.handleClick} state={this.state.buttonState} style={this.flatButtonStyle}> 

例如，在你的代碼 進口ProgressButton從「反應正在進行按鈕」

const App = React.createClass({ 
    getInitialState() { 
    return { 
     buttonState: '' 
    } 
    }, 

    render() { 
    let flatButtonStyle = window.getComputedStyle(document.getElementById('mock1')); 
    return (
     <div> 
     <FlatButton id="mock1"/> 
     <ProgressButton onClick={this.handleClick} state={this.state.buttonState} 
style={this.flatButtonStyle}> 
      Go! 
     </ProgressButton> 
     </div> 
    ) 
    }, 

    handleClick() { 
    this.setState({buttonState: 'loading'}) 
    // make asynchronous call 
    setTimeout(() => { 
     this.setState({buttonState: 'success'}) 
    }, 3000) 
    } 
}) 

這應該給你一個大致的想法。你必須稍微修改一下代碼才能使它工作。