title: Cascade text color with Styled Components on React Native
body: <p>I'm trying to create a component with React Native that includes a <code>&lt;Text&gt;</code> component inside the wrapped component:</p>
  
  <pre><code>const MyComponent = props =&gt; (
    &lt;View {...props}&gt;
     &lt;Text {...props}&gt;Hello world&lt;/Text&gt;
    &lt;View&gt;
  )
  
  const MyRedComponent = styled(MyComponent)`
    color: #000;
    margin-left: 10px;
    background: #F00;
  `
  </code></pre>
  
  <p>I'm composing my component this way so I could change the the text color from the same styled component as I'm changing the background color:</p>
  
  <pre><code>const MyBlueComponent = styled(MyRedComponent)`
    color: #FFF;
    background: #00F;
  `
  </code></pre>
  
  <p>However with this approach there is a problem that all of the styles get applied to the <code>&lt;Text&gt;</code> component, not only the <code>color</code>; in this example the <code>&lt;Text&gt;</code> component also gets the <code>margin-left</code> style from the parent styles which is not preferred. I'd only like the text color to be cascaded to the <code>&lt;Text&gt;</code> component.</p>
  
  <p>Is this possible using Styled Components with React Native?</p>