在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”。

我该如何放弃使用 AdaptV4Theme？

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