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}),
    }} />;
  }
});

here's a take on the above with glamor -

let addToButtStyle = merge(
  not(':first-child', { margin:0 }), 
  lastChild({ marginRight: 10 })
)

class ButtonGroup extends React.Component {
  render() {
    return <div>
    {this.props.labels.map(label => 
      <Button style={addToButtStyle}>{label}</Button>)}
    </div>
  }
}


let defaultStyle = {
  marginLeft: 10,
  display: 'inline',
  border: '1px solid black'
}
class Button extends React.Component {
  render() {
    return <div {...merge(defaultStyle, this.props.style)}>{this.props.children}</div>  
  }  
}


// alternately, with context 
@btnmerge(merge(  // assume this decorator magically comes from button.js 
  not(':first-child', { margin:0 }), 
  lastChild({ marginRight: 10 })
))
class ButtonGroup extends React.Component {
  render() {
    return <div>
    {this.props.labels.map(label => 
      <Button>{label}</Button>) // no props!
  }
    </div>
  }
}


// button.js 
let defaultStyle = {
  marginLeft: 10,
  display: 'inline',
  border: '1px solid black'
}
class Button extends React.Component {
  static contextTypes = {
    // yada yada 
  }
  render() {
    return <div {...merge(defaultStyle, this.context.buttStyle)}>{this.props.children}</div>  
  }  
}

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