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

例如在您的代码中从＆＃39; react-progress-button＆＃39;

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

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

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

1 个答案: