[React] Radium:updating Button Styles via Props

In a CSS library like Bootstrap we can set a button's style to be "primary" or "secondary" by appending classes. For React, we want to is able to does this via props. Radium enables this by composing styles via an array. This mimicks the cascade of CSS.

Radiumn allows ' style ' attr accepts array. Inside array, the larger index style would overwrite the pervious index ' s style.

  <button style={[ styles.base,
    type===‘primary‘ && styles.primary
  ]}> {children} </button>

So in the code, Styles.primary'll overwrite the styles.base:

 
const styles = { base: {
    backgroundColor: ‘#aaa‘,
    border: ‘none‘,
    borderRadius: 4,
    color: ‘#fff‘,
    padding: ‘5px 20px‘,
    ‘:hover‘: {
      backgroundColor: ‘#08f‘ } },
  primary: { backgroundColor: ‘#07d‘ } }

We can pass a props to the component-tell when should apply Styles.primary style:

const { render } = ReactDOM
const rootEl = document.getElementById(‘root‘)

const Button = Radium(({ children, kind }) => ( <button style={[
    styles.base,
    kind === ‘primary‘ && styles.primary
  ]}> {children} </button> ))

const styles = {
  base: {
    backgroundColor: ‘#aaa‘,
    border: ‘none‘,
    borderRadius: 4,
    color: ‘#fff‘,
    padding: ‘5px 20px‘, ‘:hover‘: {
      backgroundColor: ‘#08f‘ }
  },
  primary: {
    backgroundColor: ‘#07d‘ }
}

render( <Button kind="primary"> OK </Button>,
rootEl)

[React] Radium:updating Button Styles via Props