title: Styled Components - why does prop position affect styling?
body: <p>I'm using styled-components to style a parent and child element in a component:</p>
  
  <pre><code>function StyledDemo({
    name,
    light,
    ...props
  }) {
    return (
      &lt;Parent {...props}&gt;
        &lt;Child&gt;{name}&lt;/Child&gt;
      &lt;/Parent&gt;
    );
  }
  </code></pre>
  
  <p>I have a <code>light</code> prop which is true/false - but I'm having an issue with styling the elements based on the value of that property:</p>
  
  <pre><code>const Parent = styled.div`
    background-color: #000;
    width: 100%;
  
    ${props =&gt; props.light &amp;&amp; `
      background-color: #ccc;
    `}
  `;
  </code></pre>
  
  <p>The styling only seems to work when I remove the prop being passed into the function individually.</p>
  
  <p><code>Parent</code> element uses correct styling based on <code>light</code> prop value when:</p>
  
  <pre><code>function StyledDemo({ name, ...props })
  </code></pre>
  
  <p><code>Parent</code> element does NOT use correct styling based on <code>light</code> prop value when:</p>
  
  <pre><code>function StyledDemo({ name, light, ...props })
  </code></pre>
  
  <p>I can get it all working by setting the prop on the <code>Parent</code> and <code>Child</code> component, but this doesn't seem like it's the best way:</p>
  
  <pre><code>return (
    &lt;Parent {...props} light={light}&gt;
      &lt;Child light={light}&gt;{name}&lt;/Child&gt;
    &lt;/Parent&gt;
  );
  </code></pre>
  
  <p>Is this the correct way to apply styles to components based on props, or is there an issue with my approach?</p>
  
  <p>I have a demo to tinker with if it helps:
  <a href="https://www.webpackbin.com/bins/-Kfcsujw99cjU7ttqgTz" rel="nofollow noreferrer">https://www.webpackbin.com/bins/-Kfcsujw99cjU7ttqgTz</a></p>