React Radium - How to change property values dynamically - css

Question

I want to dynamically change, say, the background color of the button dynamically.
If this is my radium js styles file:
button-styles.js
export const styles = {
base: {
backgroundColor: 'red',
}
};
button.js
const myStyles = require('./styles/button-styles.js');
#Radium
class MyButton extends Component {
render() {
{/*
How do I tell the button to override the default value
for background color of red, to the props value if it exists,
(and in this scenario it does and is the color green)?
*/}
return (<Button style={ ??? }>Click Me</Button>)
}
}
MyButton.defaultProps = {
btnBg: 'green'
}
MyButton.propTypes = {
btnBg: PropTYpes.string
}
(A side note to the powers that be; there is no react-radium tag.)

Answer 1

You could create your styles as a function of your props.
Advantage: You do not need to have the fetching algorithm which just basically assigns your styles.
button-styles.js
export default props => ({
backgroundColor: props.btnBg
// if you need a default value you could use
// props.btnBg || 'green'
})
// You could even use ES6 object destruction
export default ({btnBg}) => ({
backgroundColor: btnBg
})
button.js
const myStyles = require('./styles/button-styles.js');
#Radium
class MyButton extends Component {
render() {
return <Button style={ myStyles(this.props) }>Click Me</Button>
}
}
MyButton.defaultProps = {
btnBg: 'green'
}
MyButton.propTypes = {
btnBg: PropTypes.string
}

Answer 2

Don't know if this is proper way to do it, but this worked for me.
Default properties in base remained, while only those with a matching
prop name in the dynamicStyle prop object were affected. So in this
example color and fontSize were not affected and remained with the
return settings, with only backgroundColor now being green..
UPDATE:
Per Janaka Stevens recommendation, I made the settings immutable. But I did so in the fetchBtnStyle method and not a hard coding in the component per Janaka Stevens' idea (ie the color property), because I theorize I would have no clue what property the user may wish to change; the user may want to change color, font-size or background-color.
button-styles.js
const styleValues = {
base: {
fontSize: '1.0em',
color: '#fff',
backgroundColor: 'red',
}
};
module.exports = {
fetchBtnStyle(values) {
const settings = {};
// making the value immutable here <-------------
Object.assign(settings, styleValues.base)
if (values !== undefined) {
Object.assign(settings, values);
}
return settings;
}
};
button.js
import btnStyles = require('./styles/button-styles.js');
#Radium
class MyButton extends Component {
render() {
return (
<Button style={ btnStyles.fetchBtnStyle(this.props.dynamicStyle) }>
Click Me
</Button>)
}
}
MyButton.defaultProps = {
dynamicStyle: {
backgroundColor: 'green'
}
}
MyButton.propTypes = {
dynamicStyle: PropTypes.object
}

Answer 3

The style needs to be immutable so you will want to define it in the render like so.
class MyButton extends Component {
render() {
let btnSty = MyStyles.base;
if (this.props.dynamicSty)
btnSty.color = this.props.dynamicSty.color;
else
btnSty.color = MyStyles.base.color;
return (
<Button style={btnSty}>
Click Me
</Button>)
}
}