Estoy usando el componente reaccionar Dropzone y necesito hacer una estilización condicional para mostrar si el archivo es aceptado o rechazado. Consiste en cambiar el color del borde a rojo cuando se rechaza el archivo y a azul cuando se acepta. Mi zona de descenso

Necesito permitir solo archivos .csv y .dat. Funcionó con el parámetro de aceptación como "application/vnd.ms-excel" para csv. Sin embargo, no encontré el MIMEType correcto para el archivo .dat. Intenté lo siguiente:

aplicación/flujo de octetos

zz-aplicación/zz-winassoc-dat

aplicación/dato

Cuando coloco solo ".dat" en el parámetro de aceptación, la restricción de entrada funciona aceptando solo el .dat, pero la estilización condicional no funciona, porque las variables isDragReject y isDragAccept toman valores incorrectos.

 const changeText=(isDragActive,isDragReject,isDragAccept)=>{ return ( <> <Typography sx={Styles.textBoard}> {(!isDragActive) && 'Drop files here or click to upload'} {(isDragActive && !isDragReject) && 'Drop files here'} {(isDragActive && isDragReject) && 'File not supported'} </Typography> </> ) } <Dropzone accept={"application/vnd.ms-excel"} onDropAccepted={onUpload}> {({ getRootProps, getInputProps, isDragActive, isDragReject,isDragAccept }) => ( <Box {...getRootProps({ //loads the basic style ...Styles.baseStyle, //change the color in function of the file that //is being dragged over the area ...(!isDragActive ? Styles.defaultStyle : {}), ...(isDragReject ? Styles.rejectStyle : {}), ...(isDragAccept ? Styles.acceptStyle : {}) })} > <CloudUpload className='ico' sx={Styles.uploadIcon}/> {changeText(isDragActive,isDragReject)} <input {...getInputProps()}/> </Box> )} </Dropzone>