React Radium Class Style Overrides - css

Question

I am trying to write clean and DRY code styles with Radium.
This is what my button is so far.
/**
*
* 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);
Two things I cannot figure out:
How can I extend the background color used by primaryBlue into primaryBlueBig without repeating myself?
How can I change the background color of both blue buttons if the disabled is true?
This is a slimmed down version of what I am currently working with and am trying to get away from having giant if else blocks in the render function. Thanks! ^.^

Answer 1

You can use modifiers.
This is basically what you’re already doing, but with a little more refactoring.
I would define the styles a little differently:
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',
}
}
};
Then you can have a big and a disabled prop.
return (
<button
style={[
styles.base,
styles[this.props.type],
this.props.big && styles.big,
this.props.disabled && styles.disabled[this.props.type]
]}>
{text}
</button>
);