title: Type error: Type 'string' is not assignable to type 'Colors'
body: <p>I have a status component button that receives props of color and title, the color has different colors defined in typescript</p>
  <p>the component instance runs when I run it on localhost but throw an error when I try to build the application</p>
  <p>Type error: Type 'string' is not assignable
  to type 'Colors'.</p>
  <p>Main Components</p>
  <pre><code>import React from 'react'
  
  import styled from 'styled-components'
  import capitalizeFirstLetter from '../../utils/capitalize-first-letter'
  
  type Colors =
    | 'primary'
    | 'secondary'
    | 'success'
    | 'danger'
    | 'warning'
    | 'info'
    | 'light'
    | 'dark'
    | 'link'
  
  const Styles = styled.button`
    outline: 0;
    border: 1px solid;
    background: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 50px;
    ${({ color }) =&gt; color === 'primary' &amp;&amp; 'border-color: #0098db; color: #0098db;'}
    ${({ color }) =&gt; color === 'secondary' &amp;&amp; 'border-color: #6c757d; color: #6c757d;'}
  ${({ color }) =&gt; color === 'success' &amp;&amp; 'border-color: #6aea87; color: #6aea87;'}
  ${({ color }) =&gt; color === 'danger' &amp;&amp; 'border-color: #dc3545; color: #dc3545;'}
  ${({ color }) =&gt; color === 'warning' &amp;&amp; 'border-color: #ffc107; color: #ffc107;'}
  ${({ color }) =&gt; color === 'info' &amp;&amp; 'border-color: #17a2b8; color: #17a2b8;'}
  ${({ color }) =&gt; color === 'light' &amp;&amp; 'border-color: #f8f9fa; color: #212529;'}
  ${({ color }) =&gt; color === 'dark' &amp;&amp; 'border-color: #343a40; color: #343a40;'}
  `
  export default function StatusButton({ title, color }: { title: string; color: Colors }) {
    return &lt;Styles color={color}&gt;{capitalizeFirstLetter(title)}&lt;/Styles&gt;
  }
  
  
  </code></pre>
  <p>Component Instance</p>
  <pre><code>&lt;StatusButton title={`${blog.status.isPublished ? 'Online' : 'Offline'}`} color={`${blog.status.isPublished ? 'success' : 'warning'}`}/&gt;
  </code></pre>