Is there a way to pass down props to a component implicitly?
<p>I'd like to be able to set a global theme (set of variables) for all of my components to inherit from and extend their default variables. For example, I have a <code>button</code> component that has default styles (inline CSS) that refer to a set of variables such as <code>primaryColor</code>, ... and I'd like to be able to update these variables easily wherever I use these components without needing to explicitly pass them to the components.</p>

<p>For example, I'd like the following behavior where I could either (1) wrap them in a component and have <code>primaryColor</code> cascade down to each <code>Button</code> component or (2) export this component in a higher order component and feed update the props, etc... however, I cannot get ay of these methods to work. Perhaps, there is a better way or ...</p>

<p>(1)</p>

<pre><code>render() {
  return (
    &lt;Theme variables={{ 'primaryColor': 'red' }}&gt;
      &lt;Button /&gt;
      &lt;SecondButton /&gt;
      &lt;ThirdButton /&gt;
    &lt;/Theme&gt;
  );
}
</code></pre>

<p>(2)</p>

<pre><code>render() {
  return (
    &lt;div&gt;
      &lt;Button /&gt;
      &lt;SecondButton /&gt;
      &lt;ThirdButton /&gt;
    &lt;/div&gt;
  );
}

export default Theme(SampleComponent)
</code></pre>

<p>This method works, as it's, obviously, passed down explicitly to each component:</p>

<pre><code>render() {
  return (
    &lt;div&gt;
      &lt;Button variables={{ 'primaryColor': 'red' }} /&gt;
      &lt;SecondButton variables={{ 'primaryColor': 'red' }} /&gt;
      &lt;ThirdButton variables={{ 'primaryColor': 'red' }} /&gt;
    &lt;/div&gt;
  );
}
</code></pre>