En mi aplicación React/TypeScript, quiero mostrar condicionalmente un color dependiendo de si el valor de payload[1] es nulo o no. Como se ve a continuación, tengo la etiqueta de style en línea.
<li className="recharts-tooltip-item" style={{ payload[1] ? color : `${payload[1].color}` }}> {payload[0] ? `${payload[1].dataKey} : ${payload[1].value}` : ""} </li>Intenté seguir las sugerencias de Una mejor manera de cambiar el color de fondo usando un operador ternario , pero recibo un error: Escriba '{ payload: Payload<ValueType, NameType>[]; 1: cualquiera; }' no se puede asignar al tipo 'Properties<string | número, cadena & {}>'. El objeto literal solo puede especificar propiedades conocidas, y la 'carga útil' no existe en el tipo 'Propiedades<cadena | número, cadena & {}>'
Actualización de Código:
const CustomTooltip = ({ active, payload, label}: TooltipProps<ValueType, NameType>) => { if(active && payload && payload.length){ return ( <div className = "custom-tooltip"> <ul className="recharts-tooltip-item-list" style={{padding: '0px', margin: '0px', listStyle:'none'}}> <li className="recharts-tooltip-item" style={{ color: payload[0] ? color : `${payload[0].color}`}} > {payload[0] ? `${payload[0].dataKey} : ${payload[0].value}` : ""} </li> </ul> </div> ); } return null; }No ha definido correctamente una propiedad en el accesorio de style . Está utilizando el valor de color sin procesar en la situación falsa. Estoy bastante seguro de que esto es lo que estás buscando.
<li style={{ color: payload[1] ? color : `${payload[1].color}` }}> {payload[0] ? `${payload[1].dataKey} : ${payload[1].value}` : ""} </li >Para su segundo problema, haga su propia definición de tipo para su componente. Algo similar a esto debería funcionar
type CustomTooltipProps = Omit<TooltipProps<ValueType, NameType>, 'payload'> & { payload: { dataKey: any; value: any; color: any; }[] }<li className="recharts-tooltip-item"style={{ color: payload[1] ? "red" : `${payload[1].color}` }}>¿Puedes intentar escribir el código así?