feat: add styles props to support Badge wrapper style

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>

components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap

@@ -16,3 +16,28 @@ exports[`Ribbon rtl render component should be rendered correctly in RTL directi
   </div>
 </div>
 `;
+
+exports[`Ribbon should support custom styles 1`] = `
+<div>
+  <div
+    class="ant-ribbon-wrapper"
+    style="color: red;"
+  >
+    <div>
+      custom styles
+    </div>
+    <div
+      class="ant-ribbon ant-ribbon-placement-end"
+    >
+      <span
+        class="ant-ribbon-text"
+      >
+        Hippies
+      </span>
+      <div
+        class="ant-ribbon-corner"
+      />
+    </div>
+  </div>
+</div>
+`;

components/badge/__tests__/ribbon.test.tsx

@@ -79,4 +79,13 @@ 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>,
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

components/badge/index.en-US.md

@@ -62,6 +62,12 @@ Common props ref：[Common props](/docs/react/common-props)
 | 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` attribute
+
+| Property | Description                           |
+| -------- | ------------------------------------- |
+| body     | The style of Ribbon Wrapper Container |
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>

components/badge/index.zh-CN.md

@@ -63,6 +63,12 @@ group: 数据展示
 | placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` |  |
 | text | 缎带中填入的内容 | ReactNode | - |  |
 
+### `styles` 属性
+
+| 名称 | 说明         |
+| ---- | ------------ |
+| body | 缎带容器样式 |
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>