跳转到内容

TimelineDot API

想要学习更多组件属性和 CSS API,可以查阅 React TimelineDot 组件的 API 文档。

导入

import TimelineDot from '@mui/lab/TimelineDot';
// 或
import { TimelineDot } from '@mui/lab';
你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

组件名称

在主题中,名称“MuiTimelineDot”可用于提供默认属性(props),或者样式覆盖

属性

原生(Native) 组件的属性也是可用的。

名称类型默认值描述
childrennode
The content of the component.
classesobject
Override or extend the styles applied to the component. See CSS API below for more details.
color'error'
| 'grey'
| 'info'
| 'inherit'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| string
'grey'
The dot can have a different colors.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant'filled'
| 'outlined'
| string
'filled'
The dot can appear filled or outlined.

ref 则会被传递到根元素中。

CSS

规则名称全局类名描述
root.MuiTimelineDot-rootStyles applied to the root element.
filled.MuiTimelineDot-filledStyles applied to the root element if variant="filled".
outlined.MuiTimelineDot-outlinedStyles applied to the root element if variant="outlined".
filledGrey.MuiTimelineDot-filledGreyStyles applied to the root element if color="grey" and variant="filled".
outlinedGrey.MuiTimelineDot-outlinedGreyStyles applied to the root element if color="grey" and variant="outlined".
filledPrimary.MuiTimelineDot-filledPrimaryStyles applied to the root element if color="primary" and variant="filled".
outlinedPrimary.MuiTimelineDot-outlinedPrimaryStyles applied to the root element if color="primary" and variant="outlined".
filledSecondary.MuiTimelineDot-filledSecondaryStyles applied to the root element if color="secondary" and variant="filled".
outlinedSecondary.MuiTimelineDot-outlinedSecondaryStyles applied to the root element if color="secondary" and variant="outlined".

您可以使用组件自定义选项对组件进行个性化:

演示项目