a.js

// Solution #1: Generic Override (like CSS)

var ButtonGroup = React.createClass({
  render() {
    return <div>{this.props.buttons.map((btn, i) => 
      <Button style={{
        ...(i !== 0 && {marginLeft: 0})
        ...(i !== this.props.buttons.length - 1 && {marginRight: 0})
      }} />
    )}</div>;
  }
});

var Button = React.createClass({
  render() {
    return <div style={{
      ...styles.button,
      ...this.props.style,
    }} />;
  }
});


// Solution #2: Encapsulated behavior

var ButtonGroup = React.createClass({
  render() {
    return <div>{this.props.buttons.map((btn, i) => 
      <Button
        hasLeftSibling={i !== 0}
        hasRightSibling={i !== this.props.buttons.length - 1}
      />
    )}</div>;
  }
});

var Button = React.createClass({
  render() {
    return <div style={{
      ...styles.button,
      ...(hasLeftSibling && {marginLeft: 0}),
      ...(hasRightSibling && {marginRight: 0}),
    }} />;
  }
});

Trying to move discussion to styled-components/spec#5.