如何将 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)
  }
})

这应该给你一个大致的想法。您必须稍微修改代码才能使其正常工作。