React Merge Styles

Deep merges all parent styles into children so that you can just reference the deep style, e.g.:

{
  backgroundColor : 'red'

  large : {
    width : 200
  }

  medium : {
    width : 100
  }
}

yields:

{
  backgroundColor : 'red'

  large : {
    backgroundColor : 'red',
    width : 200
  }

  medium : {
    backgroundColor : 'red',
    width : 100
  }
}

now styles.large, styles.medium will render correctly when used in a JSX component:

render() {
  return (
    <div style={styles.large}></div>
  )
}

Installation

npm install --save react-merge-styles

Usage

var reactMerge = require('react-merge-styles');

var styles = reactMerge({
  backgroundColor : 'red'

  large : {
    backgroundColor : 'red',
    width : 200
  }

  medium : {
    backgroundColor : 'red',
    width : 100
  }
});