React Styles

SimpleList.js

const styles = StyleSheet.create({
  list: { /* etc */ },
  hover: { /* etc */ },
});

export default class List extends React.Component {
  static propTypes = {
    style: React.PropTypes.style,
    hoverStyle: React.PropTypes.style,
  };

  render () {
    return <div style={[
      // Default base styles:
      styles.list,

      // "User" base styles:
      this.props.style,

      // Default hover styles:
      this.state.hover && styles.hover,
      
      // "User" hover styles:
      this.state.hover && this.props.hoverStyle,
    ]}>
      {this.props.items.map((content) =>
        <div>
          {content}
        </div>
      )}
    </div>;
  }
}

SimpleListUsage.js

const myStyles = StyleSheet.create({
  list: { /* etc */ },
  hover: { /* etc */ },
});

<List
  items={['Eggs', 'Milk', 'Butter']}
  style={myStyles.list}
  hoverStyle={myStyles.hover}
/>