relationships.jsx

import { cx, css } from 'emotion';
const button = {
  background: black,
  color: white,
  '& + &': {
    marginLeft: '8px',
  }
};
const buttonPrimary = {
  background: red,
};
const buttonSecondary = {
  background: green,
};
const sibling = {
  '& + &': {
    marginLeft: '8px',
  }
};
const classes = cx(
  css(button),
  {[css(buttonPrimary)]: this.props.type === 'primary'},
  {[css(buttonSecondary)]: this.props.type === 'secondary'},
);
render(
  <button
    className={`${classes} ${css(sibling)}`}
  />
);