0
333
Vistas¿Cuál es el uso de componentsProps en componentes Material-UI?
He visto este componentsProps en la documentación de la API de componentes como AutoComplete , StepLabel , BackDrop , etc.... No obtuve ningún mejor ejemplo y definición perfecta del accesorio.
¡Alguien, por favor, explíquelo con un ejemplo básico y simple en palabras fáciles de cuándo, por qué y cómo se usa!
1 Respuestas
Responde la pregunta0
MUI expone componentsProps en algunos componentes para permitirle anular los accesorios de los componentes internos. Específicamente:
En el componente
Autocomplete, se usa para anular los accesoriosAutocompleteClearIndicator.En
StepLabel, se usa para anular el componente de la etiqueta (excluir el icono). También tenga en cuenta que la API no es inconsistente como señaló @Drew Reese , solo puede anular los accesorios de etiqueta concomponentsProps, pero para anular los accesorios de icono, debe usar el accesorioStepIconPropsen su lugar.En algunos otros componentes como
Menu, no haycomponentsPropsino accesoriosTransitionPropsyMenuListPropspara anular los componentes internos individualmente.
Desafortunadamente, debido a que allí el accesorio no está tipificado (todo marcado como object ), y no se menciona en ningún otro lugar de los documentos. Tienes que sumergirte en el código fuente para saber qué hacen los componentsProps en un componente específico.
A continuación se muestra el ejemplo del componente Autocomplete con el indicador claro eliminado. Tenga en cuenta que puede hacerlo con disableClearable en Autocomplete , este es solo un ejemplo para demostrar cómo los componentsProp pueden ser potencialmente útiles:
<Autocomplete componentsProps={{ clearIndicator: { sx: { display: "none" } } }} options={top100Films} sx={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Movie" />} /> 