title: Styled Components: Change color of text due to conditon
body: <p>I have a table that renders out the string withdraw if the transaction amount is &lt;= 0 else deposit.</p>
  <p>How do I get the text color to change on this condition?</p>
  <p>I know I need to use props, but can't seem to work it out?</p>
  <p>jsx:</p>
  <pre><code>     &lt;TransactionType&gt;
       {transaction.amount &lt;= 0 ? &quot;withdraw&quot; : &quot;deposit&quot;}
       &lt;/TransactionType&gt;
  </code></pre>
  <p>Styled component:</p>
  <pre><code>export const TransactionType = styled.div&lt;ITransactionType&gt;`
  color: ${(prop) =&gt; (prop.TransactionType ? &quot;red&quot; : &quot;green&quot;)};
  </code></pre>
  <p>`;</p>
  <p>Thanks!</p>