How to add a new prop to MUI component with TS Augmentation

user_10729355 0
Viewed 346

I'm using MUI v5 and I'm trying to add a new prop to the TableRow componenent. MUI documentation on module augmentation lacks some examples, since it only shows how to add new variants (but not new props).

I tried with

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

And in my theme I added the style:

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:

TS error

How should I correctly add this new prop without wrapping it in a new component?

material-ui reactjs
1 Answers

This seems a typescript issue to me, but it works properly when creating the project in the JSX project.

If you want to achieve the same in the TSX project, you need to instruct the typescript compiler to avoid type-checking for this particular thing.

Try adding comment {/* @ts-ignore */} or // @ts-ignore before the line where you're getting the issue.

I've created a dummy project in TSX to demonstrate the issue, you can check this - https://codesandbox.io/s/mui-theme-customisation-xt7yrj

Also raised the issue in Mui regarding this - https://github.com/mui/material-ui/issues/32539

user_78881650
Related