MUI's Autocomplete has a property PaperCompomponent that allows you to pass your own react component. The property is a function that has properties as a parameter that can be used to pass it on to your component.
In Typescript, I would like to type the properties parameter. Does anyone know the exact type? It is not PaperProps which can be imported from MUI itself.
Autocomplete is using React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>; which seems to be the right one, but when accessing the children, I get a typescript error that properties.children does not exist in this type.
This is a very simple example to give you an idea of what I mean.
Autocompleter.tsx
<Autocomplete
id='autocompleter'
PaperComponent={ (properties) => <Component properties={ properties } /> }
/>
Component.tsx
interface ComponentProps {
properties: ???;
}
const Component: FunctionComponent<ComponentProps> = ({ properties }): ReactElement => (
<Container onMouseDown={ properties.children[2].props.onMouseDown }>
<div {...properties}>
<div> Some Content</div>
</Container>
))
You could create add the children prop:
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>
))
You do not have to access the children prop through properties, it can be another from your component.