跳到主要內容跳到主要內容
🚀 影響 Material UI 2025 年的藍圖！參與最新的開發者調查

TimelineDotAPI

React TimelineDot 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

Demo

Import

import TimelineDot from '@mui/lab/TimelineDot';
// or
import { TimelineDot } from '@mui/lab';

若要瞭解差異，請閱讀此關於最小化套件大小的指南。

Props

原生元件的 Props 也可使用。

名稱類型預設值描述
childrennode-

元件的內容。

classesobject-

覆寫或擴展應用於元件的樣式。

請參閱下方CSS 類別 API 以瞭解更多詳細資訊。

color'error'
| 'grey'
| 'info'
| 'inherit'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| string		'grey'

圓點可以有不同的顏色。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面 以瞭解更多詳細資訊。

variant'filled'
| 'outlined'
| string		'filled'

圓點可以顯示為填滿或外框。

ref 會轉發到根元素。

主題預設 Props

您可以使用 MuiTimelineDot 透過主題變更此元件的預設 props。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的 slot。

類別名稱規則名稱描述
.MuiTimelineDot-filledfilled如果 variant="filled"，則樣式會應用於根元素。
.MuiTimelineDot-filledGreyfilledGrey如果 color="grey" 且 variant="filled"，則樣式會應用於根元素。
.MuiTimelineDot-filledPrimaryfilledPrimary如果 color="primary" 且 variant="filled"，則樣式會應用於根元素。
.MuiTimelineDot-filledSecondaryfilledSecondary如果 color="secondary" 且 variant="filled"，則樣式會應用於根元素。
.MuiTimelineDot-outlinedoutlined如果 variant="outlined"，則樣式會應用於根元素。
.MuiTimelineDot-outlinedGreyoutlinedGrey如果 color="grey" 且 variant="outlined"，則樣式會應用於根元素。
.MuiTimelineDot-outlinedPrimaryoutlinedPrimary如果 color="primary" 且 variant="outlined"，則樣式會應用於根元素。
.MuiTimelineDot-outlinedSecondaryoutlinedSecondary如果 color="secondary" 且 variant="outlined"，則樣式會應用於根元素。
.MuiTimelineDot-rootroot應用於根元素的樣式。

您可以使用以下其中一種客製化選項來覆寫元件的樣式

原始碼

如果您在本頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。