override-style.js

var styles = StyleSheet.create({
  wrapper: {
    // ...
  },
  text: {
    // ...
  }
})
var Button = React.createClass({
  render() {
    return (
      <View style={[styles.wrapper, this.props.style]}>
        <Text style={styles.text}>{this.props.children}</Text>
      </View>
      );
  }
});


var MoreCustomButtonOptionOne = React.createClass({
  render() {
    return (
      <View style={[styles.wrapper, this.props.style]}>
        <Text style={[styles.text, this.props.textStyle]}>{this.props.children}</Text>
      </View>
      );
  }
})

var MoreCustomButtonOptionTwo = React.createClass({
  render() {
    var { color, fontSize, ...style } = this.props.style || {};
    var textStyle = { color, fontSize };
    
    return (
      <View style={[styles.wrapper, style]}>
        <Text style={[styles.text, textStyle]}>{this.props.children}</Text>
      </View>
      );
  }
})

One shortcut we've been taking is a context prop that is more “flexible”, e.g. <Button context='thatDamnPopupMenu'> that becomes .Button--isInThatDamnPopupMenu. This kinda couples the components, but sometimes there's no way to avoid coupling. Like if there's only one place in the app where button's styles are different (usually due to layout) and you can't make up a prop that makes more sense than a generic context. Still, it is absolutely explicit and defined inside Button, so this coupling is visible and colocated with the rest of the Button styles.