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

徽章API

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

演示

导入

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

通过阅读有关最小化捆绑包大小的指南，了解差异。

属性

原生组件的属性也可用。

名称类型默认值描述
anchorOrigin{ 水平?: 'left'
| 'right', 垂直?: 'bottom'
| 'top' }		{ 垂直: 'top', 水平: 'right', }

徽章的锚点。

badgeContent节点-

徽章中渲染的内容。

children节点-

徽章将相对于此节点添加。

classes对象-

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

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

color'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| 字符串		'default'

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

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

components{ Badge?: elementType, Root?: elementType }{}

用于内部每个插槽的组件。

componentsProps{ badge?: func
| object, root?: func
| object }		{}

插槽组件的额外属性。您可以覆盖现有属性或添加新属性。

invisible布尔值false

如果为 true，则徽章不可见。

max数字99

要显示的最大计数。

overlap'circular'
| 'rectangular'		'rectangular'

徽章应重叠的包裹形状。

showZero布尔值false

控制当 badgeContent 为零时是否隐藏徽章。

slotProps{ badge?: func
| object, root?: func
| object }		{}

用于 Badge 内部每个插槽的属性。

slots{ badge?: elementType, root?: elementType }{}

用于 Badge 内部每个插槽的组件。可以是用于 HTML 元素的字符串或组件。

sx数组<func
| object
| bool>
| func
| object		-

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

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

variant'dot'
| 'standard'
| 字符串		'standard'

要使用的变体。

ref 被转发到根元素。

主题默认属性

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

CSS 类

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

类名规则名称描述
.MuiBadge-anchorOriginBottomLeftanchorOriginBottomLeft如果 anchorOrigin={{ 'bottom', 'left' }}，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginBottomLeftCircularanchorOriginBottomLeftCircular如果 anchorOrigin={{ 'bottom', 'left' }} overlap="circular"，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginBottomLeftRectangularanchorOriginBottomLeftRectangular如果 anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginBottomRightanchorOriginBottomRight如果 anchorOrigin={{ 'bottom', 'right' }}，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginBottomRightCircularanchorOriginBottomRightCircular如果 anchorOrigin={{ 'bottom', 'right' }} overlap="circular"，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginBottomRightRectangularanchorOriginBottomRightRectangular如果 anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginTopLeftanchorOriginTopLeft如果 anchorOrigin={{ 'top', 'left' }}，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginTopLeftCircularanchorOriginTopLeftCircular如果 anchorOrigin={{ 'top', 'left' }} overlap="circular"，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginTopLeftRectangularanchorOriginTopLeftRectangular如果 anchorOrigin={{ 'top', 'left' }} overlap="rectangular"，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginTopRightanchorOriginTopRight如果 anchorOrigin={{ 'top', 'right' }}，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginTopRightCircularanchorOriginTopRightCircular如果 anchorOrigin={{ 'top', 'right' }} overlap="circular"，则应用于徽章 span 元素的样式。
.MuiBadge-anchorOriginTopRightRectangularanchorOriginTopRightRectangular如果 anchorOrigin={{ 'top', 'right' }} overlap="rectangular"，则应用于徽章 span 元素的样式。
.MuiBadge-badgebadge应用于徽章 span 元素的样式。
.MuiBadge-colorErrorcolorError如果 color="error"，则应用于徽章 span 元素的样式。
.MuiBadge-colorInfocolorInfo如果 color="info"，则应用于徽章 span 元素的样式。
.MuiBadge-colorPrimarycolorPrimary如果 color="primary"，则应用于徽章 span 元素的样式。
.MuiBadge-colorSecondarycolorSecondary如果 color="secondary"，则应用于徽章 span 元素的样式。
.MuiBadge-colorSuccesscolorSuccess如果 color="success"，则应用于徽章 span 元素的样式。
.MuiBadge-colorWarningcolorWarning如果 color="warning"，则应用于徽章 span 元素的样式。
.MuiBadge-dotdot如果 variant="dot"，则应用于徽章 span 元素的样式。
.MuiBadge-invisibleinvisible如果 invisible={true}，则应用于徽章 span 元素的状态类。
.MuiBadge-overlapCircularoverlapCircular如果 overlap="circular"，则应用于徽章 span 元素的样式。
.MuiBadge-overlapRectangularoverlapRectangular如果 overlap="rectangular"，则应用于徽章 span 元素的样式。
.MuiBadge-rootroot应用于根元素的样式。
.MuiBadge-standardstandard如果 variant="standard"，则应用于徽章 span 元素的样式。

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

源代码

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