树形视图 - 入门指南

开始使用树形视图。安装软件包，配置您的应用程序并开始使用组件。

安装

使用您喜欢的包管理器，安装商业版本的 @mui/x-tree-view-pro，或免费社区版本的 @mui/x-tree-view。

树形视图包对 @mui/material 有对等依赖。如果您尚未在项目中使用它，可以使用以下命令安装

请注意，react 和 react-dom 也是对等依赖项

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

样式引擎

Material UI 默认使用 Emotion 作为样式引擎。如果您想使用 styled-components，请运行

请查看样式引擎指南，以获取有关如何将 styled-components 配置为样式引擎的更多信息。

渲染您的第一个组件

为了确保一切设置正确，请尝试渲染一个简单树形视图组件

无障碍访问

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)

该组件遵循 WAI-ARIA 编写实践。

为了拥有可访问的树形视图，您必须使用 aria-labelledby 或 aria-label 在 TreeView 上引用或提供标签，否则，屏幕阅读器会将其宣布为 '树'，从而难以理解特定树形项目的内容。

TypeScript

为了从主题的 CSS 覆盖 和 默认属性自定义 中获益，TypeScript 用户需要导入以下类型。在内部，它使用模块扩展来扩展默认主题结构。

import type {} from '@mui/x-tree-view/themeAugmentation';

const theme = createTheme({
  components: {
    MuiRichTreeView: {
      styleOverrides: {
        root: {
          backgroundColor: 'red',
        },
      },
    },
  },
});

API

请参阅下面的文档，以获得此处提及的组件的所有可用属性和类的完整参考。

• <RichTreeView />
• <SimpleTreeView />
• <TreeItem />
• <TreeView />