2017-03-08 11 views
2

내 웹 사이트에서 로딩 버튼 객체 (https://github.com/mathieudutour/react-progress-button)를 사용하고 있으며 Material-UI FlatButton CSS를 전달하여 FlatButton과 동일합니다. 그러나, 나는 이것을 어떻게하는지 잘 모릅니다. 당신의 도움에 대한Material-UI FlatButton CSS를 다른 Button 구성 요소에 전달하는 방법

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

감사합니다.

답변

0

당신은 보이지 않는 평평한 버튼을 생성하고 같은 것을 사용하여 스타일을 얻을 수 있습니다 : 다음 <ProgressButton>에 할당

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

. 계산 된 모든 스타일을 반환하기 때문에 CSS 스타일 객체를 약간 수정해야 할 수도 있습니다. '반응 진행 버튼을'

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

이 당신에게 대략 아이디어를 줄 것이다에서 코드 수입 ProgressButton 예를 들어

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

. 작동 시키려면 코드를 약간 수정해야합니다.

+0

감사합니다. 내가 OP에 쓴 코드에 코드를 삽입 할 수 있다고 생각합니까? 나는 그것을 배치 할 곳이 확실하지 않습니다. 감사. – Alex

+0

@Alex 내 답변을 업데이트했습니다. 도움이되기를 바랍니다. –

+0

오류 메시지가 나타납니다. "Uncaught TypeError : 'Window'에 'getComputedStyle'을 실행하지 못했습니다. 매개 변수 1의 유형이 'Element'가 아닙니다. – Alex

관련 문제