React Radium Classスタイルのオーバーライド

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

2つのことは：

1. は、どのように私は自分自身を繰り返すことなくprimaryBlueBigにprimaryBlueで使用される背景色を拡張することができますか？
2. 無効になっている場合、両方の青いボタンの背景色を変更するにはどうすればよいですか？

これは私が現在取り組んでいるもののスリム化されたバージョンであり、レンダリング機能で巨大なif elseブロックを持つことをやめようとしています。ありがとう！ ^。^

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