title: Approach to creating variants with styled components
body: <p>What is the best way to create variants using styled components? Heres what i am currently doing.</p>
  <pre><code>  const ButtonStyle = styled.button`
    padding:8px 20px;
    border:none;
    outline:none;
    font-weight:${props =&gt; props.theme.font.headerFontWeight};
    font-size:${props =&gt; props.theme.font.headerFontSize};
    display:block;
    &amp;:hover{
      cursor:pointer;
    }
    ${({ variant }) =&gt;
      variant == 'header' &amp;&amp; css`
      background-color:${props =&gt; props.theme.colors.lightblue};
      color:${({ theme }) =&gt; theme.colors.white};
      &amp;:active{
        background-color:${props =&gt; props.theme.colors.blue}
      }
      `
    }
    ${({ variant }) =&gt;
      variant == 'white' &amp;&amp; css`
      background-color:white;
      color:${({ theme }) =&gt; theme.colors.lightblue};
      &amp;:active{
        color:${props =&gt; props.theme.colors.blue}
      }
      `
    }
  `;
  </code></pre>
  <p>I cannot tell if this is the standard way of doing things.
  I have also been using other components as bases to create other components from while changing a few things</p>
  <p>eg</p>
  <pre><code>  const InnerDiv = styled(otherComponent)`
    position: unset;
    background-color: red;
    overflow-x: hidden;
    display: flex;
  `;
  </code></pre>
  <p>Which is the better approach? Are there any better alternatives?</p>