@mui/material incompatible with versions of @types/react > 18.2.60 #41906
Description
Steps to reproduce
https://codesandbox.io/p/sandbox/test-w2msfc?file=%2Fsrc%2FInput.tsx%3A9%2C1
Steps:
- Check TS warning in Input.tsx
Type 'ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<unknown>>' is not assignable to type 'FC<InputProps>'.
Types of property 'propTypes' are incompatible.
Type 'WeakValidationMap<Omit<InputProps, "ref"> & RefAttributes<unknown>> | undefined' is not assignable to type 'WeakValidationMap<InputProps> | undefined'.
Type 'WeakValidationMap<Omit<InputProps, "ref"> & RefAttributes<unknown>>' is not assignable to type 'WeakValidationMap<InputProps>'.
Types of property 'ref' are incompatible.
Type 'Validator<LegacyRef<unknown> | undefined> | undefined' is not assignable to type 'Validator<((instance: unknown) => void) | RefObject<unknown> | null | undefined> | undefined'.
Type 'Validator<LegacyRef<unknown> | undefined>' is not assignable to type 'Validator<((instance: unknown) => void) | RefObject<unknown> | null | undefined>'.
Type 'LegacyRef<unknown> | undefined' is not assignable to type '((instance: unknown) => void) | RefObject<unknown> | null | undefined'.typescript(2322)
Current behavior
Possible but verbose solution without TS error (but is it even legit)?
export const Input2: React.ForwardRefExoticComponent<
Omit<InputProps, 'ref'> & React.RefAttributes<HTMLDivElement>
> = React.forwardRef<HTMLDivElement, InputProps>((props, ref) => {
return <MuiInput {...props} ref={ref} />;
});
Expected behavior
According to documentation:
https://mui.com/material-ui/guides/composition/#caveat-with-strictmode
It should be enough be enough to wrapt components like this:
export default React.forwardRef((props, ref) => <Component {...props} forwardedRef={ref} />);
Context
Wrapping @mui/material components
Your environment
npx @mui/envinfo
System:
OS: macOS 14.4.1
Binaries:
Node: 20.9.0 - /usr/local/bin/node
npm: 10.1.0 - /usr/local/bin/npm
pnpm: Not Found
Browsers:
Chrome: 123.0.6312.123
Edge: Not Found
Safari: 17.4.1
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: 11.11.0 => 11.11.0
@mui/base: ^5.0.0-beta.24 => 5.0.0-beta.42
@mui/core-downloads-tracker: 5.15.15
@mui/icons-material: ^5.15.13 => 5.15.15
@mui/lab: ^5.0.0-alpha.153 => 5.0.0-alpha.170
@mui/material: ^5.15.13 => 5.15.15
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14
@types/react: 18.2.62
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.4.2 => 5.4.4
Search keywords: types @types/react forwardRef