Solo quiero preguntar si es posible cambiar el color de la fuente cuando cambia el valor. al igual que cómo funciona la plataforma de negociación, marcará la fuente. Cambia el color de blanco a verde (cuando el valor sube y ), así que quiero cambiar el color de fallido a rojo durante 1 segundo cuando el valor sube y quiero cambiar el color de enviado a verde durante 1 segundo cuando el valor sube. ¿Es posible agregar el código dentro de la celda de la tabla? gracias
aquí está el código de la tabla Cell
<TableCell sx={{ border:0.1,fontSize: 11.5, fontWeight: 200 }} align="center" style={{ paddingTop: 0,paddingBottom: 0,paddingLeft: 0,paddingRight:0, }}>{port.chargeCnt}</TableCell>Necesitas:
usePrevious )setTimeout para restablecer el color al valor predeterminado después de un segundoTal:
import { usePrevious } from 'react-use'; import { useState, useEffect } from 'react'; const ChangingValue = ({ value }) => { const previous = usePrevious(value); const [color, setColour] = useState('black'); const [timeoutId, setTimeoutId] = useState(0); useEffect(() => { clearTimeout(timeoutId); if (value > previous) { setColour('green'); } else if (value < previous) { setColour('red'); } else { setColour('black'); } const newTimeoutId = setTimeout(() => { setColour('black'); }, 1000); setTimeoutId('newTimeoutId'); return () => clearTimeout(newTimeoutId); }, [value]); return <div style={{ color }}>{value}</div>; };