Inject new inline styles to a React HOC product
<p>Using a common HOC pattern like so works beautifully. However, there are times when you really don't want a component to be wrapped and just want the same component you passed in extended a bit. That's what I'm struggling with here. </p>

<p><strong>Wrapper HOC</strong></p>

<pre><code>const flexboxContainerStyles = {
  display: 'flex',
  flexDirection: 'row',
  backgroundColor: 'pink',
}

let WrapInFlexContainer = FlexChild =&gt; class extends React.Component {
  render(){

    return (
      &lt;div className="flexContainer" style={flexboxContainerStyles} &gt;
        &lt;FlexChild {...this.props} /&gt;
      &lt;/div&gt;
    )
  }
}

const Button = (props) =&gt; &lt;button&gt;{props.txt}&lt;/button&gt;
let FlexButton = WrapInFlexContainer(Button);
</code></pre>

<p>The following examples result in a button with no style attributes.</p>

<p><strong>Example 1.1: pass-through via createClass</strong></p>

<pre><code>function hocPassThroughViaClass(Component) {
  return React.createClass({
    render: function() {
     return &lt;Component {...this.props} style={flexboxContainerStyles}/&gt;;
    }
  });
}
</code></pre>

<p><strong>Example 1.2 pass-through via direct render</strong></p>

<pre><code>let hocPassThroughViaRender = Element =&gt; class extends React.Component {
  render(){   
    return &lt;Element {...this.props} className="flexContainer" style={flexboxContainerStyles} /&gt;
  }
}
</code></pre>

<p><strong>Example 2: create</strong></p>

<pre><code>function hocCreate(Component) {
  return React.createClass({
    render: function() {
      const modifiedProps = Object.assign({}, {...this.props}, {...flexboxContainerStyles});
      return React.createElement(Component, { ...modifiedProps });
    }
  });
}
</code></pre>

<p><strong>Example 3: clone</strong></p>

<pre><code>function hocClone(Component) {
  return React.createClass({
    render: function() {
      const modifiedProps = Object.assign({}, {...this.props}, {...flexboxContainerStyles});
      return React.cloneElement(&lt;Component {...modifiedProps } /&gt;);
    }
  });
}

// render examples
let HOCPassThroughViaClassButton = hocPassThroughViaClass(Button); // 1.1
let HOCPassThroughRenderButton = hocPassThroughViaRender(Button); // 1.2 
let HOCCreatedButton = hocCreate(Button); // 2
let HOCClonedButton = hocClone(Button); // 3
</code></pre>

<p>From a couple of points I'm seeing here and there across the web, it doesn't seem like it's possible to return the same <code>Component</code> if it is an only child. </p>

<p>See: <a href="https://github.com/threepointone/glamor/blob/master/docs/createElement.md" rel="nofollow noreferrer">https://github.com/threepointone/glamor/blob/master/docs/createElement.md</a></p>

<p><a href="https://discuss.reactjs.org/t/trying-to-do-a-reactdom-render-a-el-replacing-the-el-not-appending-to-it/2681/2" rel="nofollow noreferrer">https://discuss.reactjs.org/t/trying-to-do-a-reactdom-render-a-el-replacing-the-el-not-appending-to-it/2681/2</a></p>