如何在 Ant Design 中为图标添加徽章？

【问题标题】：How to add a Badge for an Icon in Ant Design?如何在 Ant Design 中为图标添加徽章？
【发布时间】：2021-03-25 14:42:35
【问题描述】：

我正在使用 Ant Design 的图标和徽章。我想为图标添加徽章：

          <VscBell
            size={30}
            style={{ marginRight: '10px', float: 'right' }}
          >
            <Badge count={5}>
              <a href="#" className="head-example" />
            </Badge>
          </VscBell>

我已经导入了import 'antd/dist/antd.css';，并且徽章在没有图标的情况下也能正常工作。该图标来自 reacticons 并且可以正确显示。我想将徽章添加到图标的右上角。但是包含在图标中时根本不显示。

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

将它们都放在 View Tag（如果您是 react-native）或 div 中然后将此样式带到徽章上：

position: absolute;
right: 0px;
top: 0px;

类似这样的：

<div>
  <VscBell
    size={30}
    style={{ marginRight: '10px', float: 'right' }}
  >
  </VscBell>
  <Badge count={5} style={{ position: 'absolute', right: 0, top: 0 }}>
    <a href="#" className="head-example" />
  </Badge>
</div>

【讨论】：

如果我使用这种样式，徽章根本不会出现。
你是 react 还是 react-native？因为风格不同。
我在 React 中。没有样式，徽章是可见的。但是当我添加样式时，它根本不可见。