樹狀檢視 - 開始使用

開始使用樹狀檢視。安裝套件、設定您的應用程式並開始使用元件。

安裝

使用您慣用的套件管理器，安裝商業版本的 @mui/x-tree-view-pro，或免費社群版本的 @mui/x-tree-view。

Tree View 套件對 @mui/material 有 peer dependency (同層級依賴)。如果您尚未在專案中使用它，可以使用以下指令安裝

請注意，react 和 react-dom 也都是 peer dependencies (同層級依賴)

"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 overrides (覆寫) 和 default prop customization (預設屬性客製化) 中獲益，TypeScript 使用者需要匯入以下類型。在內部，它使用 module augmentation (模組擴充) 來擴展預設主題結構。

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

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

API

請參閱以下文件，以取得此處提及之元件的所有 props 和 classes 的完整參考。

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