[TypeScript] Cannot override TextField variant with custom theme

[fzaninotto]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When creating a custom theme with a variant for the TextField default props, TypeScript refuses to compile:

import { createTheme } from '@mui/material/styles';

const theme  = {
  components: {
     MuiTextField: {
          defaultProps: {
              variant: 'filled',
          },
      },
   }
};

const foo = createTheme(theme);

The error is:

Argument of type '{ components: { MuiTextField: { defaultProps: { variant: string; }; }; }; }' is not assignable to parameter of type 'ThemeOptions'.
  The types of 'components.MuiTextField.defaultProps' are incompatible between these types.
    Type '{ variant: string; }' is not assignable to type 'Partial<TextFieldProps> | undefined'.
      Type '{ variant: string; }' is not assignable to type 'Partial<OutlinedTextFieldProps>'.
        Types of property 'variant' are incompatible.
          Type 'string' is not assignable to type '"outlined"'.

Expected behavior 🤔

Being able to override the variant without error

Steps to reproduce 🕹

Open the following URL on the TypeScript playground:

https://www.typescriptlang.org/play?ts=4.6.2&ssl=13&ssc=32&pln=1&pc=1#code/JYWwDg9gTgLgBAbzgYygUwIYzQFQBZohpwC+cAZlBCHAOQACIArsAPQhZpTAYA2tAKAHIIAOwDO8GASJw4AXkQC5I8GLSiY4gFxK5+gLIscaAB4wAYsDS8AJroTL9zubbTkMTXjAAKVMDp6LsFyAG4Y3BiaurTkwLy8aLa0ADROIaRpwSRZciQCJADcQiIS8OQQEAoo6Jz4hGgAFNINAJSFQA

Context 🔦

I want to allow global variant override of text fields via theme in react-admin

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.2.1
  Binaries:
    Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v14.19.1/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.1/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.3

[maxime-campane]

Hello @fzaninotto ,

The issue is with Typescript : it will not see "filled" at a proper value but as a string. To work around it, there are 2 ways : https://www.typescriptlang.org/play?ts=4.6.2#code/JYWwDg9gTgLgBAbzgYygUwIYzQFQBZohpwC+cAZlBCHAOQACIArsAPQhZpTAYA2tAKFCRYiOPkJoA8mBjAIAOwDOpClRoNmbDtm59WSmAE9eaJa1SZsEorQDcAgckWG4MAkQCMcALyIBcCjUkApoCjBKAFz+gbEAsiw4aAAeMABiwGi8ACbRCAGxhYHZaOQYTLwwAApUYFExRY2BAG4YeuHRtOTAvKbZtHAYKs7KMAA0BU2kE40kM4EkAiQOjqyscFLuXHAA7hhGcBDkcNkQwAoA5nDA8AAUAEZoMLpwj8jlSsTlMBDO4KbYa4qDCtHoYe6mACUThc8D+ITCEWiNmksnkygA2rR4YpEUpaABdXwNQIJYBJVIZLK5ElFEplCrVWr1fJTQqtdowTrdXpofrzWYC6ZLFYjVxbIgAJmJrNiONC4SUS0cYvg5AgEGJlk4KNuErQnkhDlVrzaWvQOo8aD1VslRqAA

Let me know if it helped you :)

PS : My first project at work was on ReactAdmin, loved your framework :D

[fzaninotto]

@ScreamPlasmax Thanks a lot, that solved my problem! I'll close the issue.

I know this isn't a MUI problem, but the TS errors are cryptic enough to justify a quick note in the MUI documentation.

[ZeeshanTamboli]

We can close this issue as this is not a MUI problem but a TypeScript limitation. Similar to #15697 to some extent.