reactjs - Error TS2322 al extender Button, propiedad del componente no encontrada. ¿Cuál es la forma correcta de tipar?

Estoy migrando de MUI v3 a v4. Tengo algunos componentes Button envueltos que extienden algunos estilos y otras propiedades del componente Button habitual de Material UI. Desde que actualicé a v4, recibo errores de tipo con esto. Estoy utilizando react-router-dom como mi biblioteca de enrutamiento.

Al pasar los componentes de referencia reenviada como se muestra en el ejemplo actualizado de Button en la documentación de MUI v4 (aquí: https://material-ui.com/components/buttons/#third-party-routing-library) obtengo un error de tipo que indica que component no existe en el tipo de props que he proporcionado para mi botón envuelto.

He probado varias combinaciones de tipos del componente Button para ver si algo más podría funcionar, pero parece que ButtonProps debería cubrirlo según el tipo OverrideProps del que se construye ButtonProps.

Aquí está mi reproducción en code sandbox:

https://codesandbox.io/s/mui-button-type-issue-dihdd?from-embed

Nota: Toma un minuto para que los errores de tipo aparezcan mientras Code Sandbox procesa los tipos.

Respuesta #1

Esto está sucediendo por dos razones:

1. ExtendedButton contiene un MUIButton (que tiene la propiedad component), pero ExtendedButton no es un MUIButton en sí mismo (por lo que no tiene la propiedad component).
2. La propiedad component está definida en OverridableComponent, no en OverrideProps.

Necesitas implementar la propiedad del componente y pasarla a MUIButton:

const Button: React.FC<Props & { component: React.ElementType }> = ({
  component,
  // ...
}) => (
  <MUIButton
    component={component}
    // ...
  >
    // ...
  </MUIButton>
)

Como referencia, aquí es donde se define component en MUI:

export interface OverridableComponent<M extends OverridableTypeMap> {
  <C extends React.ElementType>(props: { component: C } & OverrideProps<M, C>): JSX.Element;
  (props: DefaultComponentProps<M>): JSX.Element;
}