TS Augmentation not working when adding new props in v5

[otaviobonder-deel]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When trying to add a new prop and customize it, TS will still complain this prop doesn't exist. The documentation lack some examples on how to add new props, it only shows how to add new variants. I tried with:

import '@mui/material/TableRow'

declare module '@mui/material/TableRow' {
  interface TableRowProps {
    clickable?: boolean;
  }
}

I also tried changing the TableRowProps to TableRowPropsOverrides, but it still the same.

I added the prop to my theme to style it:

MuiTableRow: {
    styleOverrides: {
      root: {
        height: '80px',
      },
      head: {
        height: 'unset',
      },
    },
    variants: [
      {
        props: { clickable: true },
        style: {
          '&:hover': {
            cursor: 'pointer',
          },
        },
      },
    ],
  },

I don't have any TS error on my theme override, but when using the component, TS throws an error saying the clickable prop doesn't exist:

Expected behavior 🤔

TS would allow this new added prop to the component

Steps to reproduce 🕹

I created a codesandbox replicating the issue: https://codesandbox.io/s/mui-tablerow-wjem8?file=/src/App.tsx

Context 🔦

I'm trying to add a new prop to a component and customize it. I don't want to wrap this component in a new custom component, I want to use the component directly from MUI with my customized theme

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.2.1
  Binaries:
    Node: 16.13.1 - ~/.nvm/current/bin/node
    Yarn: 1.22.17 - ~/.nvm/current/bin/yarn
    npm: 8.1.2 - ~/.nvm/current/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Edge: Not Found
    Firefox: 97.0
    Safari: 15.3
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base: ^5.0.0-alpha.68 => 5.0.0-alpha.68 
    @mui/icons-material: ^5.4.1 => 5.4.1 
    @mui/lab: 5.0.0-alpha.67 => 5.0.0-alpha.67 
    @mui/material: ^5.4.0 => 5.4.0 
    @mui/private-theming:  5.3.0 
    @mui/styled-engine:  5.3.0 
    @mui/system:  5.4.0 
    @mui/types:  7.1.0 
    @mui/utils:  5.4.1 
    @mui/x-data-grid: ^5.0.1 => 5.1.0 
    @types/react:  17.0.37 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.2.4 => 4.5.2 

[mnajdova]

You cannot just add new props to the components, it has an implication to the run time, for example it would add the prop directly on the DOM element regardless of whether it is a valid HTML attribute. It is intentional that only variants, sizes and colors can be extended.

I'm trying to add a new prop to a component and customize it. I don't want to wrap this component in a new custom component, I want to use the component directly from MUI with my customized theme

If you really want to do this, you can use some data-attrbite, but I would really not recommend this, as the prop would end up on the DOM elements.

[igordanchenko]

@mnajdova, are there any plans to add variant prop to components like IconButton that don't have it now? I was trying to customize IconButton via MUI theme by adding custom variants, but discovered there is no variant prop.

[mnajdova]

@mnajdova, are there any plans to add variant prop to components like IconButton that don't have it now? I was trying to customize IconButton via MUI theme by adding custom variants, but discovered there is no variant prop.

Not at this moment, but for this specific component I would propose creating new issue with a feature request, and we talk about it there.