javascript - 在material-ui v5中，您打算如何覆盖主题组件中不存在的属性样式

Question

我正在尝试设置 MuiDataTables 的样式，目前正在使用 adaptv4theme 进行如下操作

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',
        },
      },

但是，adaptV4Theme 已被弃用，并且不知道如何将我的代码升级到新约定，就像我尝试时一样

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

     },
  },

我收到以下错误:
对象字面量只能指定已知属性，并且“组件”类型中不存在“MUIDataTable”。
我打算如何摆脱使用adapterV4Theme？

Answer 1

从 mui-v4 转换到 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',
          },
        },
      }.
    },
});

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