I am trying to style MuiDataTables and am currently using the adaptv4theme to do it like below

declare module '@material-ui/core/styles/overrides' {
  export interface ComponentNameToClassKey {
    MUIDataTable: any;
    MUIDataTableFilterList: any;
  }
}

export const theme = createMuiTheme(
  adaptV4Theme({
    overrides: {
      MUIDataTable: {
        paper: {
          boxShadow: 'none',
        },
        responsiveBase: {
          overflow: 'clip',
        },
      },
      MUIDataTableFilterList: {
        chip: {
          margin: '8px',
        },
      },

However adaptV4Theme is getting deprecated and do not know how to upgrade my code to the new convention as when I try

themeponents = {
  ...themeponents,
  MUIDataTable:{
     overrideStyles: {

     },
  },

I get the following error: Object literal may only specify known properties, and 'MUIDataTable' does not exist in type 'Components'.

How am I meant to move away from using adaptV4Theme?

I am trying to style MuiDataTables and am currently using the adaptv4theme to do it like below

declare module '@material-ui/core/styles/overrides' {
  export interface ComponentNameToClassKey {
    MUIDataTable: any;
    MUIDataTableFilterList: any;
  }
}

export const theme = createMuiTheme(
  adaptV4Theme({
    overrides: {
      MUIDataTable: {
        paper: {
          boxShadow: 'none',
        },
        responsiveBase: {
          overflow: 'clip',
        },
      },
      MUIDataTableFilterList: {
        chip: {
          margin: '8px',
        },
      },

However adaptV4Theme is getting deprecated and do not know how to upgrade my code to the new convention as when I try

theme.ponents = {
  ...theme.ponents,
  MUIDataTable:{
     overrideStyles: {

     },
  },

I get the following error: Object literal may only specify known properties, and 'MUIDataTable' does not exist in type 'Components'.

How am I meant to move away from using adaptV4Theme?

• javascript
• material-ui

1 Answer 1

The following declaration works when transitioning from mui-v4 to mui-v5:

export const theme = createTheme({
    ponents: {           // <------ rename "overrides" to "ponents"
      MUIDataTable: {
        styleOverrides: {   // <------ put override property INSIDE ponent definition
          paper: {
            boxShadow: 'none',
          },
          responsiveBase: {
            overflow: 'clip',
          },
        },
      }.
    },
});

See: https://mui./customization/theme-ponents/#global-style-overrides