Autocompletar de MUI tiene una propiedad PaperCompomponent
que le permite pasar su propio componente de reacción. La propiedad es una función que tiene properties
como parámetro que se puede usar para pasarlo a su componente.
En Typescript, me gustaría escribir el parámetro de propiedades. ¿Alguien sabe el tipo exacto? No son PaperProps
los que se pueden importar desde MUI. Autocompletar usa React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
que parece ser el correcto, pero al acceder a los children
, aparece un error mecanografiado que indica que properties.children
no existe en este tipo.
Este es un ejemplo muy simple para darle una idea de lo que quiero decir.
Autocompletar.tsx
<Autocomplete id='autocompleter' PaperComponent={ (properties) => <Component properties={ properties } /> } />
Componente.tsx
interface ComponentProps { properties: ???; } const Component: FunctionComponent<ComponentProps> = ({ properties }): ReactElement => ( <Container onMouseDown={ properties.children[2].props.onMouseDown }> <div {...properties}> <div> Some Content</div> </Container> ))
Podrías crear agregar el apoyo de los niños:
interface ComponentProps { // Obtained from the source code properties: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>; // Additional prop children: React.ReactNode; } const Component: FunctionComponent<ComponentProps> = ({ properties, children }): ReactElement => ( <Container onMouseDown={ properties.children[2].props.onMouseDown }> <div {...properties}> <div> Some Content</div> </Container> ))
No es necesario que acceda al elemento children
a través de properties
, puede ser otro desde su componente.