Custom styling does not work with TypeScript

[vavanv]

With

"react": "^17.0.2",
"@mui/material": "^5.0.6",
"mui-datatables": "^4.0.0",

const getMuiTheme = () =>
  createTheme({
    overrides: {
      MUIDataTable: {
        root: {
          backgroundColor: '#AAF',
        },
        paper: {
          boxShadow: 'none',
        },
      },
    },
  });

Gives an error with TypeScript

Argument of type '{ overrides: { MUIDataTable: { root: { backgroundColor: string; }; paper: { boxShadow: string; }; }; }; }' is not assignable to parameter of type 'ThemeOptions'.
  Object literal may only specify known properties, and 'overrides' do not exist in type 'ThemeOptions'.

the following code

const tableTheme = () =>
  createTheme(
    adaptV4Theme({
      overrides: {
        MUIDataTable: {
          root: {
            backgroundColor: '#AAF',
          },
          paper: {
            boxShadow: 'none',
         },
        },
      },
    }),
  );

gives me the following message

Type '{ MUIDataTable: { root: { backgroundColor: string; }; paper: { boxShadow: string; }; }; }' is not assignable to type 'ComponentsOverrides'.
  Object literal may only specify known properties, and 'MUIDataTable' does not exist in type 'ComponentsOverrides'.

[vavanv]

I see it did not work, it does not work with latest, ... will it be fixed?

[Brmm]

Try this

declare module '@mui/material/styles' {
  interface Components {
    [key: string]: any
  }
}

function getMuiTheme() {
  return createTheme({
    components: {
      MUIDataTableBodyCell: {
        styleOverrides: {
          root: {
            backgroundColor: '#000',
          },
        },
      },
    },
  })
}

See section "overrides" in v4 migration docs under "theme structure" https://mui.com/guides/migration-v4/#theme-structure

[vavanv]

Try this

declare module '@mui/material/styles' {
  interface Components {
    [key: string]: any
  }
}

function getMuiTheme() {
  return createTheme({
    components: {
      MUIDataTableBodyCell: {
        styleOverrides: {
          root: {
            backgroundColor: '#000',
          },
        },
      },
    },
  })
}

See section "overrides" in v4 migration docs under "theme structure" https://mui.com/guides/migration-v4/#theme-structure

works , perfect , thanks

[matt18224]

It's a bit more verbose, but to get compile time checks on components like you do with native MUI v5 components, try this:

import {ComponentsOverrides} from '@mui/material/styles/overrides';

declare module '@mui/material/styles' {
    interface Components {
        MUIDataTable?: {
            styleOverrides?: ComponentsOverrides['MUIDataTable'];
        };
        
        MUIDataTableBody?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableBody'];
        };

        MUIDataTableBodyCell?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableBodyCell'];
        };

        MUIDataTableBodyRow?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableBodyRow'];
        };

        MUIDataTableFilter?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableFilter'];
        };

        MUIDataTableFilterList?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableFilterList'];
        };

        MUIDataTableFooter?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableFooter'];
        };

        MUIDataTableHead?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableHead'];
        };

        MUIDataTableHeadCell?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableHeadCell'];
        };

        MUIDataTableHeadRow?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableHeadRow'];
        };

        MUIDataTableJumpToPage?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableJumpToPage'];
        };

        MUIDataTablePagination?: {
            styleOverrides?: ComponentsOverrides['MUIDataTablePagination'];
        };

        MUIDataTableResize?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableResize'];
        };

        MUIDataTableSearch?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableSearch'];
        };

        MUIDataTableSelectCell?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableSelectCell'];
        };

        MUIDataTableToolbar?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableToolbar'];
        };

        MUIDataTableToolbarSelect?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableToolbarSelect'];
        };

        MUIDataTableViewCol?: {
            styleOverrides?: ComponentsOverrides['MUIDataTableViewCol'];
        };
    }
}

declare module '@mui/material/styles/overrides' {
    interface ComponentNameToClassKey {
        MUIDataTable: 'root' | 'caption' | 'liveAnnounce' | 'paper' | 'responsiveScroll' | 'tableRoot';

        MUIDataTableBody: 'root' | 'emptyTitle' | 'lastSimpleCell' | 'lastStackedCell';

        MUIDataTableBodyCell:
            | 'root'
            | 'cellHide'
            | 'cellStackedSmall'
            | 'responsiveStackedSmall'
            | 'responsiveStackedSmallParent'
            | 'simpleCell'
            | 'simpleHeader'
            | 'stackedCommon'
            | 'stackedCommonAlways'
            | 'stackedHeader'
            | 'stackedParent'
            | 'stackedParentAlways';

        MUIDataTableBodyRow: 'root' | 'hoverCursor' | 'responsiveSimple' | 'responsiveStacked';

        MUIDataTableFilter:
            | 'root'
            | 'checkbox'
            | 'checkboxFormControl'
            | 'checkboxFormControlLabel'
            | 'checkboxFormGroup'
            | 'checkboxIcon'
            | 'checkboxListTitle'
            | 'checked'
            | 'filtersSelected'
            | 'gridListTile'
            | 'header'
            | 'noMargin'
            | 'reset'
            | 'resetLink'
            | 'title';

        MUIDataTableFilterList: 'root' | 'chip';

        MUIDataTableFooter: 'root';

        MUIDataTableHead: 'main' | 'responsiveSimple' | 'responsiveStacked' | 'responsiveStackedAlways';

        MUIDataTableHeadCell:
            | 'root'
            | 'contentWrapper'
            | 'data'
            | 'dragCursor'
            | 'fixedHeader'
            | 'hintIconAlone'
            | 'hintIconWithSortIcon'
            | 'mypopper'
            | 'sortAction'
            | 'sortActive'
            | 'sortLabelRoot'
            | 'toolButton'
            | 'tooltip';

        MUIDataTableHeadRow: 'root';

        MUIDataTableJumpToPage: 'root' | 'caption' | 'input' | 'select' | 'selectIcon' | 'selectRoot';

        MUIDataTablePagination:
            | 'root'
            | '@media screen and (max-width: 400px)'
            | 'navContainer'
            | 'selectRoot'
            | 'tableCellContainer'
            | 'toolbar';

        MUIDataTableResize: 'root' | 'resizer';

        MUIDataTableSearch: 'clearIcon' | 'main' | 'searchIcon' | 'searchText';

        MUIDataTableSelectCell:
            | 'root'
            | 'checkboxRoot'
            | 'checked'
            | 'disabled'
            | 'expandDisabled'
            | 'expanded'
            | 'fixedHeader'
            | 'fixedLeft'
            | 'headerCell'
            | 'hide'
            | 'icon';

        MUIDataTableToolbar:
            | 'root'
            | '@media screen and (max-width: 480px)'
            | "[theme.breakpoints.down('sm')]"
            | "[theme.breakpoints.down('xs')]"
            | 'actions'
            | 'filterCloseIcon'
            | 'filterPaper'
            | 'fullWidthActions'
            | 'fullWidthLeft'
            | 'fullWidthRoot'
            | 'fullWidthTitleText'
            | 'icon'
            | 'iconActive'
            | 'left'
            | 'searchIcon'
            | 'titleRoot'
            | 'titleText';

        MUIDataTableToolbarSelect: 'root' | 'deleteIcon' | 'iconButton' | 'title';

        MUIDataTableViewCol:
            | 'root'
            | 'checkbox'
            | 'checkboxRoot'
            | 'checked'
            | 'formControl'
            | 'formGroup'
            | 'label'
            | 'title';
    }
}

[ashfaqnisar]

Hey @vavanv @wdh2100, As the error was resolved, can you close this issue ?

[gnowland]

Problem Fixed! (click to expand)

Try this

declare module '@mui/material/styles' {
  interface Components {
    [key: string]: any
  }
}

function getMuiTheme() {
  return createTheme({
    components: {
      MUIDataTableBodyCell: {
        styleOverrides: {
          root: {
            backgroundColor: '#000',
          },
        },
      },
    },
  })
}

See section "overrides" in v4 migration docs under "theme structure" https://mui.com/guides/migration-v4/#theme-structure

This does not work for me, I get the following error:

Argument of type '{ components: { MUIDataTableBodyCell: { styleOverrides: { root: { backgroundColor: string; }; }; }; }; }' is not assignable to parameter of type 'ThemeOptions'.
  Type '{ components: { MUIDataTableBodyCell: { styleOverrides: { root: { backgroundColor: string; }; }; }; }; }' is missing the following properties from type 'ThemeOptions': colors, general, sidebar, header
  ts(2345)

if instead I use

interface ThemeOptions {
    [key: string]: any
  }

I then get the following error:

Type '{ MUIDataTableBodyCell: { styleOverrides: { root: { backgroundColor: string; }; }; }; }' is not assignable to type 'Components<BaseTheme>'.
  Object literal may only specify known properties, and 'MUIDataTableBodyCell' does not exist in type 'Components<BaseTheme>'

🎉 UPDATE: I fixed it per the instructions regarding "nesting the theme" https://mui.com/customization/theming/#nesting-the-theme

import { createTheme, Theme, ThemeProvider } from '@mui/material/styles';
import MUIDataTable from 'mui-datatables';

export default function ThemeNestingExtend() {
  return (
    <ThemeProvider
      theme={(baseTheme: Theme) =>
        createTheme({
          ...baseTheme,
          components: {
            ...baseTheme.components,
            MUIDataTableBodyCell: {
              styleOverrides: {
                root: {
                  backgroundColor: '#FF0000',
                },
              },
            },
          },
        })
      }
    >
      <MUIDataTable />
    </ThemeProvider>
  );
}