[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 components we want to be able to do 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 will overwrite the pervious index's style.

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

So in the code, styles.primary will 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 to 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)