Estoy tratando de usar el componente DatePicker de la versión 5 de MUI. Lo he incluido exactamente como se especifica en el ejemplo de codesandbox de los documentos de MUI. Así que mi componente se ve así:
const MonthPicker: FC = () => { const [value, setValue] = React.useState<Date | null>(new Date()); return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker views={['year', 'month']} label="Year and Month" minDate={new Date('2012-03-01')} maxDate={new Date('2023-06-01')} value={value} onChange={(newValue) => { setValue(newValue); }} renderInput={(props) => <TextField {...props} size='small' helperText={null} />} /> </LocalizationProvider> ) } Independientemente de lo que intentara, siempre recibía el mensaje de error: React no reconoce el accesorio renderInput en un elemento DOM. Si desea que aparezca intencionalmente en el DOM como un atributo personalizado, escríbalo como entrada de renderinput en minúsculas.
Si lo escribo en minúsculas, entonces el código ni siquiera se procesa. ¿Qué estoy haciendo mal aquí?
Este es un error de MUI, también puede ver que sucede en los documentos oficiales cuando abre el MonthPicker . Es porque se olvidaron de filtrar la devolución de llamada renderInput antes de pasar el resto de los accesorios al elemento DOM.
Puede ver en la fuente que YearPicker no tiene este problema porque pasa todos los accesorios manualmente , mientras que MonthPicker elige distribuir los accesorios restantes que incluyen renderInput ; este es un accesorio no válido porque el atributo HTML no sabe nada. sobre el objeto de devolución de llamada JS.
Este error es solo una advertencia de ReactJS cuando cree que está haciendo algo mal, pero no es así porque se trata de un error ascendente y no afecta nada más en cuanto a la funcionalidad, así que ignórelo.