Estoy programando una aplicación de tareas pendientes en React. En la parte inferior doy la fecha en que vence el todo. Si es para hoy, es rojo, si no, es normal. Le doy al pequeño día la clase "dueToday" si es para hoy. Eso también funciona:
<small className="dueToday">2021-11-24</small> <small>2021-11-25</small>En mi CSS tengo el siguiente código:
small .dueToday { /* color: rgb(160,84,112); */ color: red; }En el navegador se ve así: Captura de pantalla
Código de reacción:
{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> ))}Su problema es que está buscando una etiqueta small que tenga un elemento interno con la clase .dueToday . Se supone que debe verificar si hay una etiqueta small con una clase .dueToday , para hacer eso, simplemente elimine el espacio en su selector de CSS de esta manera:
small.dueToday { /* color: rgb(160,84,112); */ color: red; }