title: styled-components - Parent component style overriding child style
body: <p>I'm using <code>styled-components</code> with React. I'd like to remove the default bottom margin for all <code>&lt;p&gt;</code>s, so in my main <code>App</code> component I added a nested selector:</p>
  <pre><code>const App = styled.div`
    p {
      margin: 0;
    }
  `
  </code></pre>
  <p>However, I do want to be able to add margin to some <code>&lt;p&gt;</code>s, e.g.:</p>
  <pre><code>const SpacedP = styled.p`
    margin-bottom: 10px;
  `
  </code></pre>
  <p>But when I try to use a <code>&lt;SpacedP&gt;</code> within <code>&lt;App&gt;</code>, the resulting <code>App</code> CSS is more specific than the <code>SpacedP</code> CSS, so my <code>&lt;SpacedP&gt;</code>s still have no margin! (<code>App</code> CSS compiles to <code>${App} p { ... }</code>, while <code>SpacedP</code> only has one prefix, <code>${SpacedP} { ... }</code>).</p>
  <p>Is there a common pattern for situations like these? I don't really like the <code>&amp;&amp;&amp;</code> specificity workaround suggested <a href="https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity" rel="nofollow noreferrer">here</a>, seems ugly and hacky; hoping there's a more common setup that I'm missing.</p>
  <p>Thanks!</p>