Styled Components: Change color of text due to conditon

Question

I have a table that renders out the string withdraw if the transaction amount is <= 0 else deposit.

How do I get the text color to change on this condition?

I know I need to use props, but can't seem to work it out?

jsx:

     <TransactionType>
     {transaction.amount <= 0 ? "withdraw" : "deposit"}
     </TransactionType>

Styled component:

export const TransactionType = styled.div<ITransactionType>`
color: ${(prop) => (prop.TransactionType ? "red" : "green")};

`;

Thanks!

Answer 1

<TransactionType type={transaction.amount <= 0 ? 'withdraw' : 'deposit'} >
  {transaction.amount <= 0 ? "withdraw" : "deposit"}
</TransactionType>

export const TransactionType = styled.div<ITransactionType>`
color: ${({ type }) => (type === 'withdraw' ? "red" : "green")};

I renamed your prop to type for improved readability, but the concept is the same. And used destructing of the props argument to get type directly accessible.