Badge API
想要学习更多组件属性和 CSS API，可以查阅 React Badge 组件的 API 文档。
导入
import Badge from '@mui/material/Badge';
// 或
import { Badge } from '@mui/material';组件名称
The nameMuiBadge can be used when providing default props or style overrides in the theme.属性
BadgeUnstyled 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| anchorOrigin | { horizontal: 'left' | 'right', vertical: 'bottom' | 'top' } | { vertical: 'top', horizontal: 'right', } | The anchor of the badge. |
| badgeContent | node | The content rendered within the badge. | |
| children | node | The badge will be added relative to this node. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| color | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string | 'default' | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| components | { Badge?: elementType, Root?: elementType } | {} | The components used for each slot inside the Badge. Either a string to use a HTML element or a component. |
| componentsProps | { badge?: func | object, root?: func | object } | {} | The props used for each slot inside the Badge. |
| invisible | bool | false | If true, the badge is invisible. |
| max | number | 99 | Max count to show. |
| overlap | 'circular' | 'rectangular' | 'rectangular' | Wrapped shape the badge should overlap. |
| showZero | bool | false | Controls whether the badge is hidden when badgeContent is zero. |
| sx | Array<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 | 'dot' | 'standard' | string | 'standard' | The variant to use. |
ref 则会被传递到根元素中。继承
While not explicitly documented above, the props of the BadgeUnstyled component are also available on Badge. You can take advantage of this to target nested components.CSS
| 规则名称 | 全局类名 | 描述 |
|---|---|---|
| root | .MuiBadge-root | Styles applied to the root element. |
| badge | .MuiBadge-badge | Class name applied to the badge `span` element. |
| dot | .MuiBadge-dot | Class name applied to the badge `span` element if variant="dot". |
| standard | .MuiBadge-standard | Class name applied to the badge `span` element if variant="standard". |
| anchorOriginTopRight | .MuiBadge-anchorOriginTopRight | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'right' }}. |
| anchorOriginBottomRight | .MuiBadge-anchorOriginBottomRight | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'right' }}. |
| anchorOriginTopLeft | .MuiBadge-anchorOriginTopLeft | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'left' }}. |
| anchorOriginBottomLeft | .MuiBadge-anchorOriginBottomLeft | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'left' }}. |
| invisible | .MuiBadge-invisible | Pseudo-class applied to the badge `span` element if invisible={true}. |
| colorPrimary | .MuiBadge-colorPrimary | Styles applied to the badge `span` element if color="primary". |
| colorSecondary | .MuiBadge-colorSecondary | Styles applied to the badge `span` element if color="secondary". |
| colorError | .MuiBadge-colorError | Styles applied to the badge `span` element if color="error". |
| colorInfo | .MuiBadge-colorInfo | Styles applied to the badge `span` element if color="info". |
| colorSuccess | .MuiBadge-colorSuccess | Styles applied to the badge `span` element if color="success". |
| colorWarning | .MuiBadge-colorWarning | Styles applied to the badge `span` element if color="warning". |
| anchorOriginTopRightRectangular | .MuiBadge-anchorOriginTopRightRectangular | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'right' }} overlap="rectangular". |
| anchorOriginBottomRightRectangular | .MuiBadge-anchorOriginBottomRightRectangular | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular". |
| anchorOriginTopLeftRectangular | .MuiBadge-anchorOriginTopLeftRectangular | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'left' }} overlap="rectangular". |
| anchorOriginBottomLeftRectangular | .MuiBadge-anchorOriginBottomLeftRectangular | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular". |
| anchorOriginTopRightCircular | .MuiBadge-anchorOriginTopRightCircular | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'right' }} overlap="circular". |
| anchorOriginBottomRightCircular | .MuiBadge-anchorOriginBottomRightCircular | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'right' }} overlap="circular". |
| anchorOriginTopLeftCircular | .MuiBadge-anchorOriginTopLeftCircular | Class name applied to the badge `span` element if anchorOrigin={{ 'top', 'left' }} overlap="circular". |
| anchorOriginBottomLeftCircular | .MuiBadge-anchorOriginBottomLeftCircular | Class name applied to the badge `span` element if anchorOrigin={{ 'bottom', 'left' }} overlap="circular". |
| overlapRectangular | .MuiBadge-overlapRectangular | Class name applied to the badge `span` element if overlap="rectangular". |
| overlapCircular | .MuiBadge-overlapCircular | Class name applied to the badge `span` element if overlap="circular". |
您可以使用组件自定义选项对组件进行个性化：
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.