如何在自定义MUI主题中配置TreeItem组件样式？

1. 扩展MUI组件的TypeScript类型定义 #

由于TreeItem属于@mui/lab而非@mui/material的标准组件，默认的MUI主题类型不包含它的配置项，需要手动扩展类型声明：

在项目中创建类型声明文件（比如src/types/mui.d.ts），添加以下代码：

import { TreeItemProps } from '@mui/lab/TreeItem';
import { OverridesStyleRules } from '@mui/material/styles/overrides';
import { Theme } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Components {
    MuiTreeItem?: {
      defaultProps?: Partial<TreeItemProps>;
      styleOverrides?: Partial<OverridesStyleRules<
        keyof TreeItemProps['classes'],
        'MuiTreeItem',
        Theme
      >>;
    };
  }
}

2. 在自定义主题中配置TreeItem的颜色样式 #

完成类型扩展后，就可以在createTheme中正常配置MuiTreeItem的样式覆盖了，示例如下：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        // 默认状态下的文字颜色
        label: {
          color: '#2d3748',
        },
        // 选中状态的背景与文字颜色
        selected: {
          backgroundColor: '#ebf8ff',
          '& .MuiTreeItem-label': {
            color: '#2b6cb0',
          },
        },
        // 图标容器的hover颜色
        iconContainer: {
          '&:hover': {
            color: '#2b6cb0',
          },
        },
      },
    },
  },
});

export default theme;

3. 确保TypeScript识别类型声明 #

检查项目的tsconfig.json，确保include数组包含你的类型声明文件路径，比如：

{
  "include": ["src/**/*", "src/types/**/*"]
}

错误原因说明 #

你遇到的TS2322类型错误，本质是因为TypeScript默认不识别@mui/lab组件在MUI主题中的配置项，必须通过扩展类型声明，让编译器认可MuiTreeItem作为主题组件配置的合法属性。

内容的提问来源于stack exchange，提问作者user