跳到主要内容跳到主要内容
🚀 影响 Material UI 的 2025 年路线图！参与最新的开发者调查

LinearProgressAPI

React LinearProgress 组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

示例

导入

import LinearProgress from '@mui/material/LinearProgress';
// or
import { LinearProgress } from '@mui/material';

阅读本指南，了解有关最小化包大小的差异。



ARIA

如果进度条描述的是页面特定区域的加载进度，则应使用 aria-describedby 指向进度条，并将该区域的 aria-busy 属性设置为 true，直到加载完成。

属性

原生组件的属性也可用。

名称类型默认值描述
classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参见下面的 CSS 类 API。

color'inherit'
| 'primary'
| 'secondary'
| string		'primary'

组件的颜色。它支持默认主题颜色和自定义主题颜色，可以按照调色板自定义指南中所示的方式添加。

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

允许定义系统覆盖以及其他 CSS 样式的系统属性。

有关更多详细信息，请参见 `sx` 页面。

valuenumber-

确定型和缓冲型变体的进度指示器值。值介于 0 到 100 之间。

valueBuffernumber-

缓冲型变体的值。值介于 0 到 100 之间。

variant'buffer'
| 'determinate'
| 'indeterminate'
| 'query'		'indeterminate'

要使用的变体。当没有进度值时，请使用 indeterminate 或 query。

ref 被转发到根元素。

主题默认属性

您可以使用 MuiLinearProgress 通过主题更改此组件的默认属性。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的插槽。

类名规则名称描述
.MuiLinearProgress-barbar应用于分层 bar1 和 bar2 元素的样式。
.MuiLinearProgress-bar1bar1应用于 bar1 元素的样式。
.MuiLinearProgress-bar1Bufferbar1Buffer如果 variant="buffer"，则应用于 bar1 元素的样式。
.MuiLinearProgress-bar1Determinatebar1Determinate如果 variant="determinate"，则应用于 bar1 元素的样式。
.MuiLinearProgress-bar1Indeterminatebar1Indeterminate如果 variant="indeterminate or query"，则应用于 bar1 元素的样式。
.MuiLinearProgress-bar2bar2应用于 bar2 元素的样式。
.MuiLinearProgress-bar2Bufferbar2Buffer如果 variant="buffer"，则应用于 bar2 元素的样式。
.MuiLinearProgress-bar2Indeterminatebar2Indeterminate如果 variant="indeterminate or query"，则应用于 bar2 元素的样式。
.MuiLinearProgress-barColorPrimarybarColorPrimary如果 color="primary"，则应用于 bar 元素；如果 variant 不是 "buffer"，则应用于 bar2。
.MuiLinearProgress-barColorSecondarybarColorSecondary如果 color="secondary"，则应用于 bar 元素；如果 variant 不是 "buffer"，则应用于 bar2。
.MuiLinearProgress-bufferbuffer如果 variant="buffer"，则应用于根元素。
.MuiLinearProgress-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素和 bar2 元素；如果 variant="buffer"，则应用于 bar2。
.MuiLinearProgress-colorSecondarycolorSecondary如果 color="secondary"，则应用于根元素和 bar2 元素；如果 variant="buffer"，则应用于 bar2。
.MuiLinearProgress-dasheddashed如果 variant="buffer"，则应用于附加的 bar 元素。
.MuiLinearProgress-dashedColorPrimarydashedColorPrimary如果 variant="buffer" 且 color="primary"，则应用于附加的 bar 元素。
.MuiLinearProgress-dashedColorSecondarydashedColorSecondary如果 variant="buffer" 且 color="secondary"，则应用于附加的 bar 元素。
.MuiLinearProgress-determinatedeterminate如果 variant="determinate"，则应用于根元素。
.MuiLinearProgress-indeterminateindeterminate如果 variant="indeterminate"，则应用于根元素。
.MuiLinearProgress-queryquery如果 variant="query"，则应用于根元素。
.MuiLinearProgress-rootroot应用于根元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。