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

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}>

例如，在您的代碼中，從“ react-progress-button”導入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)
  }
})

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