[typescript] Incompatible types between React.forwardRef and OverridableComponent

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When I try to define a wrapper for a component that uses the OverridableComponent type helper and uses React.forwardRef, I get a typescript error:

import React from "react";
import MUITypography, { TypographyTypeMap, TypographyProps } from "@mui/material/Typography";
import { OverridableComponent } from "@mui/material/OverridableComponent";


export const Typography: OverridableComponent<TypographyTypeMap> = React.forwardRef(function Typography<
  D extends React.ElementType
>(props: TypographyProps<D>, ref: React.Ref<HTMLSpanElement> | null) {
  return <MUITypography ref={ref} variantMapping={defaultVariantMapping} {...props} />;
});

Type 'ForwardRefExoticComponent<Pick<SystemProps<Theme> & { align?: "inherit" | "left" | "right" | "center" | "justify" | undefined; children?: ReactNode; classes?: Partial<TypographyClasses> | undefined; ... 5 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...>, string | ... 1 more ... | symb...' is not assignable to type 'OverridableComponent<TypographyTypeMap<{}, "span">>'.
  Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'Element'.
    Type 'null' is not assignable to type 'ReactElement<any, any>'.ts(2322)

Expected behavior 🤔

I would expect types to be compatible

Steps to reproduce 🕹

In a typescript project define this in a file:

import React from "react";
import MUITypography, { TypographyTypeMap, TypographyProps } from "@mui/material/Typography";
import { OverridableComponent } from "@mui/material/OverridableComponent";


export const Typography: OverridableComponent<TypographyTypeMap> = React.forwardRef(function Typography<
  D extends React.ElementType
>(props: TypographyProps<D>, ref: React.Ref<HTMLSpanElement> | null) {
  return <MUITypography ref={ref} variantMapping={defaultVariantMapping} {...props} />;
});

Context 🔦

I have an internal package to isolate Mui and either re-export components directly, or wrap them.

If I only export my component without doing an explicit typing with OverridableComponent, I don’t have a proper autocompletion working, which is why I’d like to use that in the first place.

If I update the OverridableComponent to the following (returning JSX.Element | null instead of just JSX.Element)

export interface OverridableComponent<M extends OverridableTypeMap> {
  <C extends React.ElementType>(
    props: {
      /**
       * The component used for the root node.
       * Either a string to use a HTML element or a component.
       */
      component: C;
    } & OverrideProps<M, C>,
  ): JSX.Element | null;
  (props: DefaultComponentProps<M>): JSX.Element | null;
}

Then the type issue disappears.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.1/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Not Found
    Firefox: 97.0.1
    Safari: 15.4
  npmPackages:
    @mui/system: 5.5.0 => 5.5.0

This is not browser related.

Typescript version: 4.5.4 @types/react-dom: 17.0.14 @types/react: 17.0.43

[michaldudak]

Hi @HHK1, sorry for the delayed response. I took a closer look at OverridableComponent and I don’t see a reason for not including null as the return type. Would you like to create a PR? Please not that we have two versions of OverridableComponent - one in @mui/material and the other in @mui/types.

[michaldudak]

@rotemee Please open a new issue and provide a codesandbox with reproduction steps if you still encounter issues in this area.