ComponentA-map-worst.jsx

import B from './ComponentB-map.jsx';

export default const A = React.creatClass({
  
  render() {
    const { wrapperStyle, BStyleMap } = this.props.style;
    
    // now you have to grok A's map, as well as B's map _and_ hope B has a map that supports the
    // customization that you would want B to support when in this A context
    return (
      <div style={wrapperStyle}>
        <B style={BStyleMap} />
      </div>
    );
  }
});

ComponentB-map.jsx

export default const B = React.creatClass({
  
  render() {
    // now you have to grok the internals of this map to customize it
    const { wrapperStyle, textStyle } = this.props.style;
    
    return (
      <div style={wrapperStyle}>
        <p style={textStyle}>Hello!</p>
      </div>
    );
  }
});

ComponentB.jsx

export default const B = React.creatClass({
  
  render() {
    // unfortunately you can't 'customize' the <p> text in this component
    return (
      <div style={this.props.style}>
        <p style={{ color: red }}>Hello!</p>
      </div>
    );
  }
});