如何将Material-UI FlatButton CSS传递到其他Button组件

Question

I'm using a loading button object in my website ( https://github.com/mathieudutour/react-progress-button ), and I'm trying to pass the Material-UI FlatButton CSS into it so that it looks the same as the FlatButton. However, I'm not sure how to do this.

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

Thanks for your help.

Answer 1

You can create an invisible flat button and get the style by using something like:

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

Then assign it to <ProgressButton> . You might have to modify the CSS style object a bit since it is returning you all the computed styles.

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

For example in your code import ProgressButton from 'react-progress-button'

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

This should give you a roughly idea. You have to modify the code a little bit to make it work.