【Material UI】Badge 组件详解与应用

最新推荐文章于 2026-06-05 08:31:43 发布

原创最新推荐文章于 2026-06-05 08:31:43 发布 · 1.1k 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#ui #javascript #开发语言 #Material-UI #前端

material-ui 专栏收录该内容

228 篇文章

订阅专栏

文章目录

Material UI 是 React 生态系统中非常流行的 UI 库，提供了丰富的组件来帮助开发者快速构建现代化的用户界面。本文将详细介绍 Material UI 中的 Badge 组件，探讨其基本用法、颜色设置以及自定义方法，帮助你在实际项目中更好地使用该组件。

一、Badge 组件概述

1. 组件介绍

Badge 组件是一个小型标识符，通常用于表示通知、状态或数量信息。它可以附加在其他 UI 元素上（如图标、按钮等），以直观地传达信息。例如，在消息图标上添加一个 Badge 以显示未读消息的数量。这种简洁的设计既不打扰用户，又能有效传递信息，是现代用户界面设计中常用的模式。

2. Badge 的使用场景

Badge 组件可以在以下几种典型场景中使用：

通知提醒：在消息、购物车或其他图标旁显示未读信息或项目的数量。
状态指示：例如使用不同颜色的 Badge 表示在线或离线状态。
进度或完成度：显示任务完成百分比或其他进度相关信息。

二、Badge 组件的基本用法

Badge 组件的基本使用非常简单。它通过 badgeContent 属性来设置显示的内容，并通过 color 属性来设置 Badge 的颜色。以下是一个简单的示例，展示了如何在邮件图标上使用 Badge 组件。

1. 基本 Badge 示例

import React from 'react';
import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';

export default function SimpleBadge() {
  return (
    <Badge badgeContent={4} color="primary">
      <MailIcon color="action" />
    </Badge>
  );
}

在这个示例中，我们使用了一个 Badge 组件，设置了 badgeContent={4} 表示未读消息数量为 4，同时通过 color="primary" 设置了 Badge 的颜色为主题中的主色。

2. Badge 颜色的自定义

Material UI 提供了多种颜色选项，可以通过 color 属性来设置 Badge 的颜色。常见的颜色选项包括 primary、secondary、error、success 等。

以下示例展示了如何设置不同的颜色：

import React from 'react';
import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';

export default function ColorBadges() {
  return (
    <div>
      <Badge badgeContent={4} color="secondary">
        <MailIcon color="action" />
      </Badge>
      <Badge badgeContent={4} color="success">
        <MailIcon color="action" />
      </Badge>
    </div>
  );
}

在这个示例中，我们分别设置了 Badge 的颜色为 secondary 和 success，它们对应的颜色会反映在组件上。这种灵活的颜色配置可以帮助开发者根据实际应用场景定制 UI 元素的外观。

三、Badge 组件的自定义

Material UI 提供了强大的自定义功能，允许开发者通过样式覆盖（overrides）来调整 Badge 组件的外观，以满足具体的设计需求。

1. 自定义 Badge 示例

下面是一个简单的自定义示例，通过 styled 方法定制 Badge 组件的样式。

import React from 'react';
import Badge from '@mui/material/Badge';
import { styled } from '@mui/material/styles';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import IconButton from '@mui/material/IconButton';

const StyledBadge = styled(Badge)(({ theme }) => ({
  '& .MuiBadge-badge': {
    right: -3,
    top: 13,
    border: `2px solid ${theme.palette.background.paper}`,
    padding: '0 4px',
  },
}));

export default function CustomizedBadges() {
  return (
    <IconButton aria-label="cart">
      <StyledBadge badgeContent={4} color="secondary">
        <ShoppingCartIcon />
      </StyledBadge>
    </IconButton>
  );
}

在这个示例中，我们创建了一个自定义的 Badge 组件 StyledBadge，并对其 badge 元素的样式进行了调整。通过这种方式，你可以精确控制 Badge 的位置、大小、边框等属性，从而实现完全符合设计要求的外观。

2. 样式覆盖的实现

在 Material UI 中，样式覆盖主要通过 styled 和 sx 属性实现。styled 方法允许你创建高度定制化的组件，而 sx 属性则提供了一种更简洁的方式来调整组件样式。

例如，通过 sx 属性来调整 Badge 的样式：

<Badge
  badgeContent={4}
  color="primary"
  sx={{
    '& .MuiBadge-badge': {
      right: 10,
      top: 10,
      border: '2px solid white',
      padding: '0 4px',
    },
  }}
>
  <MailIcon color="action" />
</Badge>

这种灵活的样式定制能力，使得 Material UI 的 Badge 组件可以轻松适应不同的设计需求，帮助开发者快速构建个性化的用户界面。