样式化组件：根据条件更改文本颜色

Question

我有一个表，如果交易金额 <= 0，则显示字符串提款，否则存款。

在这种情况下如何改变文本颜色？

我知道我需要使用道具，但似乎无法解决？

jsx：

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

样式组件：

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

`；

谢谢！

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")};

我将您的道具重命名为 type 以提高可读性，但概念是相同的。并使用 props 参数的解构来获取可直接访问的类型。