title: How to pass styles from a child to the parent using styled components
body: <p>I am trying to create a few variants of buttons and decided to use Styled Components to accomplish this. However, I am having some issues trying to pass a variant button from a child to the parent that holds all the variants.</p>
  <p>Currently, I have a Navbar that imports the Button.js component. I would like to have the option to change the button within the Navbar.js like this:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Button default label=&quot;Game&quot; /&gt;
  &lt;Button secondary label=&quot;Dictionary&quot; /&gt;
  </code></pre>
  <p>However, within my Button.js file, I have tried switching the style of the button through using props, but this does not work.</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import styled from 'styled-components'
  
  const ButtonStyle = styled.span`
    // shared styles ...
    // props
    background: ${props =&gt; props.primary ? &quot;red&quot; : &quot;white&quot;};
  
  `
  
  function Button({ label }) {
    return &lt;ButtonStyle&gt;{label}&lt;/ButtonStyle&gt;
  }
  
  export default Button
  </code></pre>
  <p>I've also tried extending styles, but the problem is that the name, TomatoeButton, does not get passed to the Navbar.js component.</p>
  <pre class="lang-js prettyprint-override"><code>const TomatoButton = styled(Button)`
    color: tomato;
    border-color: tomato;
  `;
  </code></pre>
  <p>Shouldn't this take in the primary attribute and change the color of the background?</p>