如何在 react/next.js 中为特定文本添加自定义样式

Question

我有一个表格，我正在实现一个搜索功能，该功能可以搜索一个元素并在将搜索词输入到搜索栏中时突出显示它们。 我得到了搜索 function 工作但没有突出显示。

我想根据我的输入 state 有条件地将自定义样式应用于我的 array.map 中的文本，或者有条件地使用样式呈现自定义元素。 这是代码（代码中的注释）

 <Table className={styles.table}>
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Date and time</th>
                    <th>Debit</th>
                    <th>Credit</th>
                    <th>Balance</th>
                </tr>
            </thead>
            <tbody>
                {input.length < 1 ? displayTransactions.map(transaction => (
                    <tr key={transaction._id}>
                    <td>{transaction.description}</td>
                    <td>{transaction.date}</td>
                    <td className={styles.debit}>- ${transaction.debit}</td>
                    <td className={styles.credit}>+ ${transaction.credit}</td>
                    <td>{transaction.balance}</td>
                    </tr>
                )) : output.map(transaction => (
                    <tr key={transaction._id}>
                    {transaction.description.includes(input) ? <td className={styles.highlight}>transaction.description</td>: <td>transaction.description</td>} // I want to either render the comp with a styled class and I can add CSS to it or like below apply styling directly 
                    <td>transaction.description.includes(input) ? // apply style directly here transaction.description ? transaction.description</td>
                    <td>{transaction.date}</td>
                    <td className={styles.debit}>- ${transaction.debit}</td>
                    <td className={styles.credit}>+ ${transaction.credit}</td>
                    <td>{transaction.balance}</td>
                    </tr>
                ))}
            </tbody>
        </Table>

如果我感到困惑，我很抱歉。 这里的输入是我得到的 e.target.value 和我想要在输入时突出显示的字母。

谢谢

Answer 1

{input.length 
< 1 ? displayTransactions.map(transaction => (
                   <tr key={transaction._id} className={**className**}>
                   <td>{transaction.description}</td>
                   <td>{transaction.date}</td>
                   <td className={styles.debit}>- ${transaction.debit}</td>
                   <td className={styles.credit}>+ ${transaction.credit}</td>
                   <td>{transaction.balance}</td>
                   </tr>
               ))

由于 map() 为数组中的每个元素返回（在这种情况下）一个单独的代码，因此可以直接定位单独的代码给最上面的标签（在这种情况下）tr 提供一个类名，然后定位其中的每个值（td）就像我们在任何 css styles 中所做的那样。 如果您想为输入的不同值显示自定义 styles，请使用 javascript。 在您的自定义 styles 中为 styles 创建对象，然后使用 javascript dom 或使用 if..else 语句获取表中的值。 然后只需将样式 object（您使用自定义样式的地方）的名称指定为样式或 class 标记！

几个月前我确实使用过这种方法。我不知道这是否可行！

Answer 2

您可以根据搜索词有条件地将 className 添加到td 。 像下面这样的东西应该可以工作：

<td className={transaction.description.includes(input) ? styles.highlight: ''}>
  {transaction.description}
</td>