TablePropsSizeOverrides customization via module augmentation

[brentertz]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am trying to augment the available Table sizes via module augmentation, to include a "large" size, in addition to the existing "small" and "medium" sizes.

This is currently defined at the top of my custom theme file.

declare module '@mui/material/Table' {
  interface TablePropsSizeOverrides {
    size?: 'small' | 'medium' | 'large';
  }
}

declare module '@mui/material/TableCell' {
  interface TableCellClasses {
    sizeLarge: string;
  }
}

While things render properly, it causes TypeScript issues in the component and in the theme.

Component

<Table size="large" /> // TS error - Type '"large"' is not assignable to type '"small" | "medium" | undefined'

Theme

{
    MuiTable: {
      defaultProps: {
        size: 'large', // TS error - Type '"large"' is not assignable to type '"small" | "medium" | undefined'
      },
    },
    MuiTableCell: {
      styleOverrides: {
        sizeLarge: { // This works!
          paddingBlock: 10,
        },
        sizeMedium: {
          paddingBlock: 5,
        },
        sizeSmall: {
          paddingBlock: 2,
        },
      },
    },
}

Expected behavior 🤔

I would expect the first 2 errors in the example above to "just work" - that is to say that "large" would be a valid option for the size prop.

I am not sure if that would just work for the TableCell component as well. Perhaps it would require its own augmentation? The TableCell component does however add the "MuiTableCell-sizeLarge" CSS class, so it renders properly.

Steps to reproduce 🕹

https://codesandbox.io/s/trusting-swanson-tpedid?file=/demo.tsx

Context 🔦

I am trying to augment the available Table sizes via module augmentation, to include a "large" size, in addition to the existing "small" and "medium" sizes.

Alternatively, I suppose that I could create wrapper components for the Table and TableCell components and implement the size prop overrides that way. It seemed that module augmentation was the recommended approach however.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Edge: Not Found
    Firefox: 100.0.2
    Safari: 15.4
  npmPackages:
    @emotion/react:  11.10.0
    @emotion/styled:  11.10.0
    @mui/base:  5.0.0-alpha.92
    @mui/material:  5.9.3
    @mui/private-theming:  5.9.3
    @mui/styled-engine:  5.8.7
    @mui/styles:  5.9.3
    @mui/system:  5.9.3
    @mui/types:  7.1.5
    @mui/utils:  5.9.0
    @mui/x-data-grid:  5.13.0
    @mui/x-data-grid-pro:  5.13.0
    @mui/x-date-pickers:  5.0.0-beta.0
    @mui/x-date-pickers-pro:  5.0.0-beta.0
    @mui/x-license-pro:  5.12.1
    @types/react: ^17.0.0 || ^18.0.0 => 18.0.15
    react:  18.2.0
    react-dom:  18.2.0
    typescript: 4.6.3 => 4.6.3

[siriwatknp]

I recommend doing this https://codesandbox.io/s/naughty-lake-lp15nu?file=/demo.tsx, but there is a typescript bug on the TableCell.

When you customize the component based on props, use variants or a callback because the classes will be removed at some point.

variants
https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

MuiTableCell: {
  variants: [
    { props: { size: 'small', style: { paddingBlock: 2 },
    ...
  ]
}

styleOverrides callback
https://mui.com/material-ui/customization/theme-components/#overrides-based-on-props

MuiTableCell: {
  styleOverrides: {
    root: ({ ownerState }) => ({
      ...(ownerState.size === "small" && {
        paddingBlock: 2
      }),
      ...(ownerState.size === "medium" && {
        paddingBlock: 5
      }),
      ...(ownerState.size === "large" && {
        paddingBlock: 10
      })
    })
  }
}

[siriwatknp]

Suggested fix:

diff --git a/packages/mui-material/src/TableCell/TableCell.d.ts b/packages/mui-material/src/TableCell/TableCell.d.ts
index 73f9ba19ed..94b0c32a17 100644
--- a/packages/mui-material/src/TableCell/TableCell.d.ts
+++ b/packages/mui-material/src/TableCell/TableCell.d.ts
@@ -1,8 +1,11 @@
 import * as React from 'react';
+import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TableCellClasses } from './tableCellClasses';
 
+export interface TableCellPropsSizeOverrides {}
+
 /**
  * `<TableCell>` will be rendered as an `<th>`or `<td>` depending
  * on the context it is used in. Where context literally is the
@@ -46,7 +49,7 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align
    * Specify the size of the cell.
    * The prop defaults to the value (`'medium'`) inherited from the parent Table component.
    */
-  size?: 'small' | 'medium';
+  size?: OverridableStringUnion<'small' | 'medium', TableCellPropsSizeOverrides>;
   /**
    * Set aria-sort direction.
    */

Need to check the proptypes of Table & TableCell as well

[iamxukai]

@siriwatknp I want to have a try.