diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
index 453c071d0c61..6fdf1aff02af 100644
--- a/components/badge/Ribbon.tsx
+++ b/components/badge/Ribbon.tsx
@@ -16,6 +16,7 @@ export interface RibbonProps {
   color?: LiteralUnion<PresetColorType>;
   children?: React.ReactNode;
   placement?: RibbonPlacement;
+  rootClassName?: string;
 }
 
 const Ribbon: React.FC<RibbonProps> = (props) => {
@@ -27,6 +28,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     children,
     text,
     placement = 'end',
+    rootClassName,
   } = props;
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
@@ -48,7 +50,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     cornerColorStyle.color = color;
   }
   return wrapSSR(
-    <div className={classNames(`${prefixCls}-wrapper`, hashId)}>
+    <div className={classNames(`${prefixCls}-wrapper`, rootClassName, hashId)}>
       {children}
       <div className={classNames(ribbonCls, hashId)} style={{ ...colorStyle, ...style }}>
         <span className={`${prefixCls}-text`}>{text}</span>
diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.tsx.snap
similarity index 100%
rename from components/badge/__tests__/__snapshots__/demo.test.ts.snap
rename to components/badge/__tests__/__snapshots__/demo.test.tsx.snap
diff --git a/components/badge/__tests__/demo.test.ts b/components/badge/__tests__/demo.test.ts
deleted file mode 100644
index e1bdd02d5eee..000000000000
--- a/components/badge/__tests__/demo.test.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('badge');
diff --git a/components/badge/__tests__/demo.test.tsx b/components/badge/__tests__/demo.test.tsx
new file mode 100644
index 000000000000..18e41f6256fb
--- /dev/null
+++ b/components/badge/__tests__/demo.test.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
+
+demoTest('badge');
+
+rootPropsTest('badge', (Badge, props) => <Badge.Ribbon {...props} />, {
+  name: 'Badge.Ribbon',
+});