title: How to efficiently add variants for components using styled-components and React
body: <p>Working on a personal project using React for front-end as a greenhorn programmer.</p>
  <p>I want to create a Button component using <code>styled-components</code> package that can be re-used across the app in slightly varying sizes, colors and hover behaviors. Button may appear on individual posts, in the nav bar, forms etc. So far, I've only used it in a few cases and the code for the component is already getting a bit cumbersome to handle. Here's what it looks like as of now:</p>
  <pre><code>import styled from 'styled-components';
  import { Link } from 'react-router-dom';
  
  const Button = styled(Link)`
    margin: 5px;
    display: grid;
    place-items: center;
    font-size: 1em;
    padding: 0 1em;
    height: ${props =&gt; (props.small ? '35px' : '40px')};
    background: ${props =&gt; (props.nav ? props.theme.color.white : '#30336b1a')};
    border-radius: ${props =&gt; (props.small ? '3px' : '5px')};
    color: ${props =&gt; (props.nav ? props.theme.color.forest : '#30336b')};
    border: ${props =&gt;
      props.outline ? `2px solid ${props.theme.color.forest}` : null};
    text-decoration: none;
    transition: 0.2s ease-in-out;
  
    &amp;:hover {
      background: ${props =&gt; (props.nav ? props.theme.color.forest : '#f6e58d')};
      color: ${props =&gt; (props.nav ? props.theme.color.white : null)};
    }
  `;
  
  export default Button;
  </code></pre>
  <p><code>small</code> and <code>nav</code> and <code>outline</code> are the variant names as of now and I see the need to add a couple more. But the entire <code>props=&gt; props.variant? do-this: or-that;</code> is getting unwieldy and unreadable.</p>
  <p>Either I can extend the component and create multiple ButtonVariant components or perhaps use an if-else or switch statements to return an appropriately styled variant. Both approaches seem to not repeat code by extending them with <code>styled(Button)</code> usage but I want to know what according to the seasoned folks would be good performance wise and codebase maintainability wise. Documentation and plenty of research online hasn't thrown up a good answer yet.</p>