reactcss playground

list-item.js

import React from 'react'
import reactCSS from 'reactcss'

const ListItem = ({ label, first, last, hover }) => {
  const styles = reactCSS({
    'default': {
      item: {
        marginTop: 1,
        padding: 15,
        background: '#333',
      },
      label: {
        size: 'small',
      },
    },
    'first': {
      item: {
        marginTop: 0,
        borerRadius: '2px 2px 0 0',
      },
    },
    'last': {
      item: {
        borerRadus: '0 0 2px 2px',
      },
    },
    'hover': {
      item: {
        background: '#444',
      },
      label: {
        weight: 'bold',
      },
    },
  }, { first, last, hover })

  return (
    <div style={ styles.item }>
      <Text style={ styles.label }>
        { label }
      </Text>
    </div>
  )
}