React Radium 클래스 스타일 재정의

Question

라듐으로 깨끗하고 DRY 코드 스타일을 작성하려고합니다. 이것은 내 버튼이 지금까지있는 것입니다. 내가 알아낼 수 없습니다

/** 
* 
* Button 
* 
*/ 

import React, { PropTypes } from 'react'; 
import Radium from 'radium'; 

const styles = { 
    base: { 
    borderRadius: '3px', 
    backgroundColor: '#23cdf4', 
    fontSize: '13px', 
    }, 
    primaryBlue: { 
    backgroundColor: '#23cdf4', 
    }, 
    primaryBlueBig: { 
    borderRadius: '8px', 
    fontSize: '16px', 
    padding: '14px 28px', 
    }, 
    primaryRed: { 
    backgroundColor: '#F99CAC', 
    }, 
}; 

class Button extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <button 
     style={[styles.base, styles[this.props.type], this.props.style]} 
     > 
     {text} 
     </button> 
    ); 
    } 
} 

Button.propTypes = { 
    text: PropTypes.any, 
    type: PropTypes.oneOf(['primaryBlue', 'primaryBlueBig']).isRequired, 
    style: PropTypes.object, 
    disabled: PropTypes.bool, 
}; 

export default Radium(Button); 

두 가지 :

1. 어떻게 자신을 반복하지 않고 primaryBlueBig에 primaryBlue에 사용되는 배경 색상을 연장 할 수 있습니까?
2. 비활성화 된 경우 두 파란색 버튼의 배경색을 어떻게 바꿀 수 있습니까?

이것은 현재 내가 작업하고있는 부분의 축소판이며 렌더링 기능에서 다른 블록을 사용하지 않으려 고합니다. 감사! ^.^

Answer 1

modifiers을 사용할 수 있습니다.

이것은 기본적으로 이미 수행하고 있지만 리팩토링이 조금 더 있습니다.

좀 다른 스타일을 정의하는 것입니다 :

const styles = { 
    base: { 
    borderRadius: '3px', 
    backgroundColor: '#ffffff', 
    fontSize: '13px', 
    }, 

    primaryBlue: { 
    backgroundColor: '#23cdf4', 
    }, 
    primaryRed: { 
    backgroundColor: '#F99CAC', 
    }, 

    big: { 
    borderRadius: '8px', 
    fontSize: '16px', 
    padding: '14px 28px', 
    }, 

    disabled: { 
    primaryBlue: { 
     backgroundColor: '#eeeeee', 
    }, 
    primaryRed: { 
     backgroundColor: '#eff0f1', 
    } 
    } 
}; 

그런 다음 당신이 big과 disabled 소품을 가질 수 있습니다.

return (
    <button 
    style={[ 
     styles.base, 
     styles[this.props.type], 
     this.props.big && styles.big, 
     this.props.disabled && styles.disabled[this.props.type] 
    ]}> 
    {text} 
    </button> 
);