diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
index 4bd8ef5ff998..3b3491e09ad7 100644
--- a/components/badge/Ribbon.tsx
+++ b/components/badge/Ribbon.tsx
@@ -13,6 +13,9 @@ export interface RibbonProps {
   className?: string;
   prefixCls?: string;
   style?: React.CSSProperties; // style of ribbon element, not the wrapper
+  styles?: {
+    body?: React.CSSProperties;
+  };
   text?: React.ReactNode;
   color?: LiteralUnion<PresetColorType>;
   children?: React.ReactNode;
@@ -25,6 +28,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     className,
     prefixCls: customizePrefixCls,
     style,
+    styles,
     color,
     children,
     text,
@@ -55,7 +59,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     cornerColorStyle.color = color;
   }
   return wrapCSSVar(
-    <div className={classNames(wrapperCls, rootClassName, hashId, cssVarCls)}>
+    <div className={classNames(wrapperCls, rootClassName, hashId, cssVarCls)} style={styles?.body}>
       {children}
       <div className={classNames(ribbonCls, hashId)} style={{ ...colorStyle, ...style }}>
         <span className={`${prefixCls}-text`}>{text}</span>
diff --git a/components/badge/__tests__/ribbon.test.tsx b/components/badge/__tests__/ribbon.test.tsx
index 042b3b438ab1..1d444d409b62 100644
--- a/components/badge/__tests__/ribbon.test.tsx
+++ b/components/badge/__tests__/ribbon.test.tsx
@@ -80,4 +80,14 @@ describe('Ribbon', () => {
       expect(container.querySelectorAll('.cool').length).toEqual(1);
     });
   });
+
+  it('should support custom styles', () => {
+    const { container } = render(
+      <Badge.Ribbon text="Hippies" styles={{ body: { color: 'red' } }}>
+        <div>custom styles</div>
+      </Badge.Ribbon>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-ribbon-wrapper');
+    expect(element).toHaveStyle({ color: 'red' });
+  });
 });
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 325d290187c3..ef77b57ecbe7 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -61,6 +61,13 @@ Common props ref：[Common props](/docs/react/common-props)
 | color | Customize Ribbon color | string | - |  |
 | placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` |  |
 | text | Content inside the Ribbon | ReactNode | - |  |
+| styles | Configure Ribbon build-in module's style | body?: CSSProperties; | - | 5.16.0 |
+
+### `styles` attribute
+
+| Property | Description                           | Version |
+| -------- | ------------------------------------- | ------- |
+| body     | The style of Ribbon Wrapper Container | 5.16.0  |
 
 ## Semantic DOM
 
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index b53b26acc228..a545366b6f3a 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -62,6 +62,13 @@ group: 数据展示
 | color | 自定义缎带的颜色 | string | - |  |
 | placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` |  |
 | text | 缎带中填入的内容 | ReactNode | - |  |
+| styles | 配置缎带内置模块的 style | body?: CSSProperties; | - | 5.16.0 |
+
+### `styles` 属性
+
+| 名称 | 说明         | 版本   |
+| ---- | ------------ | ------ |
+| body | 缎带容器样式 | 5.16.0 |
 
 ## Semantic DOM