[TableCell] Enable variant overrides via TypeScript module augmentation

docs/pages/material-ui/api/table-cell.json

@@ -34,8 +34,8 @@
     },
     "variant": {
       "type": {
-        "name": "enum",
-        "description": "'body'<br>&#124;&nbsp;'footer'<br>&#124;&nbsp;'head'"
+        "name": "union",
+        "description": "'body'<br>&#124;&nbsp;'footer'<br>&#124;&nbsp;'head'<br>&#124;&nbsp;string"
       }
     }
   },

packages/mui-material/src/TableCell/TableCell.d.ts

@@ -5,6 +5,7 @@ import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TableCellClasses } from './tableCellClasses';
 
 export interface TableCellPropsSizeOverrides {}
+export interface TableCellPropsVariantOverrides {}
 
 /**
  * `<TableCell>` will be rendered as an `<th>`or `<td>` depending
@@ -62,7 +63,7 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align
    * Specify the cell type.
    * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
    */
-  variant?: 'head' | 'body' | 'footer';
+  variant?: OverridableStringUnion<'head' | 'body' | 'footer', TableCellPropsVariantOverrides>;
 }
 
 export type TableCellBaseProps = React.ThHTMLAttributes<HTMLTableCellElement> &

packages/mui-material/src/TableCell/TableCell.js

@@ -240,7 +240,10 @@ TableCell.propTypes /* remove-proptypes */ = {
    * Specify the cell type.
    * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
    */
-  variant: PropTypes.oneOf(['body', 'footer', 'head']),
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['body', 'footer', 'head']),
+    PropTypes.string,
+  ]),
 };
 
 export default TableCell;

packages/mui-material/test/typescript/moduleAugmentation/tableCellCustomProps.spec.tsx

@@ -13,6 +13,9 @@ declare module '@mui/material/TableCell' {
   interface TableCellPropsSizeOverrides {
     large: true;
   }
+  interface TableCellPropsVariantOverrides {
+    tableBody: true;
+  }
 }
 
 // theme typings should work as expected
@@ -26,10 +29,28 @@ const theme = createTheme({
           }),
         }),
       },
+      variants: [
+        {
+          props: { variant: 'tableBody' },
+          style: {
+            fontSize: '1.2em',
+            color: '#C1D3FF',
+          },
+        },
+      ],
     },
   },
 });
 
 <Table size="large">
   <TableCell size="large" />
 </Table>;
+
+<Table size="large">
+  <TableCell variant="tableBody">Foo</TableCell>;
+</Table>;
+
+<Table size="large">
+  {/* @ts-expect-error unknown variant */}
+  <TableCell variant="tableHeading">Bar</TableCell>;
+</Table>;