ant design 在菜单栏添加红色标徽

Ant Design 是一套基于 React 的设计组件库，用于快速构建高质量的企业级 UI 界面。要在 Ant Design 的 Menu 菜单栏中添加红色标徽，你可以使用 `Menu.Item` 组件，并结合自定义图标和 CSS 样式来实现。以下是一个简单的示例：

import { Menu, Icon } from 'antd';
import '@ant-design/icons'; // 引入图标库

const RedBadge = ({ text }) => (
  <span className="red-badge">{text} <Icon type="exception" style={{ fontSize: '14px', color: 'white', marginRight: '5px' }} /></span>
);

const menuItems = [
  {
    key: 'menu1',
    title: '菜单项一',
    badge: { text: '3' }, // 自带红色数字标徽
    icon: <RedBadge text="+1" />, // 使用自定义红标徽
    children: [],
  },
  ...其他菜单项
];

<Menu
  mode="horizontal"
  theme="light"
  defaultSelectedKeys={['menu1']}
  items={menuItems}
/>

在这个例子中，我们在 `Menu.Item` 中添加了 `badge` 属性来显示默认的红色数字，然后通过 `icon` 属性插入了一个自定义的 `RedBadge` 组件，这个组件会在内部渲染一个异常警告图标并添加红色文字。

如果你想更改颜色，可以在 `.red-badge` 类上直接应用 CSS 样式，比如修改 `color` 属性。