react-howl/src/components/Bar.jsx

A unified design system.

import React from 'react';
import { withStyles, normalize } from ':styles';

const styles = () => ({
  container: () => ({
    background: 'blue',
  }),

  button: normalize.button({
    background: 'red',

    '&[type="submit"]': {
      background: 'black',
    },
  }),

  text: {
    background: 'purple',
  },
});

export default withStyles(styles)(({ classNames, children }) => (
  <div className={classNames.container}>
    <button type="submit" className={classNames.button}>
      click me
    </button>
    <span className={classNames.text}>text</span>
    {children}
  </div>
));