Question

0

116

Views

MUI Autocomplete Typescript: What is the type of PaperComponents function parameter

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>
))

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-06-30T13:08:22.170Z

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.