我正在 React 中撰寫一個待辦事項應用程式。在底部，我給出了待辦事項到期的日期。如果今天到期，它是紅色的，如果不是，則是正常的。如果今天到期，我會給小天上課“dueToday”。這也有效：
<small className="dueToday">2021-11-24</small>
<small>2021-11-25</small>
在我的 CSS 中，我有以下代碼：
small .dueToday {
/* color: rgb(160,84,112); */
color: red;
}
在瀏覽器中它看起來像這樣： 截圖
反應代碼：
{todos.map((todo) => (
<div
key={todo.id}
className="todo"
onClick={() => deleteTodo(todo.id)}
>
<h3>{todo.title}</h3>
{todo.due !=
`${d.getFullYear()}-${d.getMonth() 1}-${d.getDate()}` ? (
<small>{todo.due}</small>
) : (
<small className="dueToday">{todo.due}</small>
)}
</div>
))}
uj5u.com熱心網友回復：
你的問題是你正在尋找一個small標簽，里面有.dueToday你應該檢查的類的內部專案，你應該檢查一個small帶有.dueToday類的標簽，這樣做只需洗掉你的 CSS 選擇器中的空格，如下所示：
small.dueToday {
/* color: rgb(160,84,112); */
color: red;
}
uj5u.com熱心網友回復：
在你的 css 你只需要 .dueToday {color: red;}
并且您的條件可以是以下內容：
<small
className={
todo.due !=
`${d.getFullYear()}-${d.getMonth() 1}-${d.getDate()}` &&
"dueToday"
}
onClick={() => handleClick(...lang.evtArgs)}
>
{todo.due}
</small>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/364895.html
標籤：javascript css 反应