Margin example 3

Group.jsx

import React from 'react';
import c from 'classnames';
import injectSheet from 'react-jss';
import s from './styles';

class Group extends React.PureComponent {
  render() {
    const { children = [], inline, classes, className, small } = this.props;
    const rootClassNames = c(
      classes.group,
      className,
      inline && classes['group-inline'],
      small && classes['group-small'],
    );

    return (
      <div className={rootClassNames}>
        {
          React.Children.map(children, child =>
            child && (
              <div className={classes.groupItem} key={child.key}>
                { child }
              </div>
            ),
          )
        }
      </div>
    );
  }
}

export default injectSheet(s)(Group);

styles.js

export default {
  group: {
    margin: '-16px 0 0 -16px',
  },

  groupItem: {
    padding: '16px 0 0 16px',
  },

  'group-inline': {
    '& $groupItem': {
      display: 'inline-block',
      verticalAlign: 'middle',
    },
  },

  'group-small': {
    margin: '-8px 0 0 -8px',

    '& $groupItem': {
      padding: '8px 0 0 8px',
    },
  },
};