In material-ui v5 How are you meant to override the styles of properties that don't exist in the themes components

Question

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.components = {
  ...theme.components,
  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?

score 4 · Answer 1 · answered Oct 17 '21 at 18:11

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


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

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

In material-ui v5 How are you meant to override the styles of properties that don't exist in the themes components

1 Answers1