[TextField] Unable to extend `TextFieldProps` for type customisation.
See original GitHub issueDuplicates
- 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:
- run https://codesandbox.io/s/mui-textfieldprops-interface-issue-kndlgc and open the live code sample.
- 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
}
}
Issue Analytics
- State:
- Created a year ago
- Comments:5 (1 by maintainers)
Top GitHub Comments
Instead of using interface and
extends
,you can use type and
&
as follows:Here is a working solution: https://codesandbox.io/s/mui-textfieldprops-interface-issue-forked-s0nyd9
@hbjORbj Haven’t got any explanation with the issue and this issue is closed.
is this the way, reported issues are replied to?