[TextField] Unable to extend `TextFieldProps` for type customisation.

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I want to add extra functionality on the native Mui TextField component, and thus need to extend the native TextFieldProps and add extra types.

import { TextFieldProps } from '@mui/material';

export interface CustomTextFieldProps as TextFieldProps {
  label?: string;
  subLabel?: string;
  tooltip?: string;
};

I’m able to do it for other components, but TextFieldProps getting the following error.

If I try the following code 👇, everything’s working as expected. But TextFieldProps should be extendible like other component props.

import { TextFieldProps } from '@mui/material';

export type CustomTextFieldProps = TextFieldProps & {
  label?: string;
  subLabel?: string;
  tooltip?: string;
};

Expected behavior 🤔

TextFieldProps should be extendible the same as other components props, as in documentation for reference only a few examples are given and thus it’s expected that all the components will perform the same behavior which is being violated here again.

I tried extending other components Props and it’s working fine and as expected but only failing for TextFieldProps.

Steps to reproduce 🕹

Steps:

1. run https://codesandbox.io/s/mui-textfieldprops-interface-issue-kndlgc and open the live code sample.
2. Follow the instructions added as comments to comment/uncomment some lines to replicate the issue.

Context 🔦

I want to create the custom TextField and thus need to leverage existing TextFieldProps to extend and create CustomTextFieldProps required as per my use-case.

I’m able to do this with other components like Chip | Button | IconButton | Box, but it’s only failing with the TextField component.

I assume, somehow TextFieldProps has not been created with an interface like other component props have been created.

Below are the screenshots on how I’m extending other component props -

Your environment 🌎

`npx @mui/envinfo`

  
System:
    OS: macOS 12.3.1
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.8.0 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.4
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.78 
    @mui/icons-material: ^5.6.2 => 5.6.2 
    @mui/lab: ^5.0.0-alpha.79 => 5.0.0-alpha.79 
    @mui/material: ^5.6.3 => 5.6.3 
    @mui/private-theming:  5.6.2 
    @mui/styled-engine:  5.6.1 
    @mui/system:  5.6.3 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.1 
    @mui/x-date-pickers:  5.0.0-alpha.0 
    @types/react: ^18.0.0 => 18.0.8 
    react: ^18.1.0 => 18.1.0 
    react-dom: ^18.1.0 => 18.1.0 
    typescript: ^4.4.2 => 4.6.3 

    Browser used:
    Google Chrome

tsconfig configuration

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  }
}

[hbjORbj]

Instead of using interface and extends,

export interface CustomTextFieldProps extends TextFieldProps {
  subLabel?: string;
  tooltip?: string;
};

you can use type and & as follows:

export type CustomTextFieldProps = {
  subLabel?: string;
  tooltip?: string;
} & TextFieldProps;

Here is a working solution: https://codesandbox.io/s/mui-textfieldprops-interface-issue-forked-s0nyd9

[rishavpandey43]

@hbjORbj Haven’t got any explanation with the issue and this issue is closed.

is this the way, reported issues are replied to?