🐛 fix Badge color not working when contains children (#21333)

close #21331

components/badge/__tests__/__snapshots__/index.test.js.snap

@@ -69,6 +69,42 @@ exports[`Badge badge should support float number 2`] = `
 </Badge>
 `;
 
+exports[`Badge render Badge status/color when contains children 1`] = `
+Array [
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <a />
+    <sup
+      class="ant-scroll-number ant-badge-dot ant-badge-status-success"
+      data-show="true"
+      title="5"
+    />
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <a />
+    <sup
+      class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
+      data-show="true"
+      title="5"
+    />
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <a />
+    <sup
+      class="ant-scroll-number ant-badge-dot"
+      data-show="true"
+      style="background:#08c"
+      title="5"
+    />
+  </span>,
+]
+`;
+
 exports[`Badge render correct with negative number 1`] = `
 <div>
   <span

components/badge/__tests__/index.test.js

@@ -111,4 +111,22 @@ describe('Badge', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/21331
+  it('render Badge status/color when contains children', () => {
+    const wrapper = render(
+      <>
+        <Badge count={5} status="success">
+          <a />
+        </Badge>
+        <Badge count={5} color="blue">
+          <a />
+        </Badge>
+        <Badge count={5} color="#08c">
+          <a />
+        </Badge>
+      </>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  })
 });

components/badge/index.tsx

@@ -136,7 +136,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
   }
 
   renderBadgeNumber(prefixCls: string, scrollNumberPrefixCls: string) {
-    const { status, count } = this.props;
+    const { status, count, color } = this.props;
 
     const displayCount = this.getDispayCount();
     const isDot = this.isDot();
@@ -147,9 +147,16 @@ export default class Badge extends React.Component<BadgeProps, any> {
       [`${prefixCls}-count`]: !isDot,
       [`${prefixCls}-multiple-words`]:
         !isDot && count && count.toString && count.toString().length > 1,
-      [`${prefixCls}-status-${status}`]: this.hasStatus(),
+      [`${prefixCls}-status-${status}`]: !!status,
+      [`${prefixCls}-status-${color}`]: isPresetColor(color),
     });
 
+    let statusStyle: React.CSSProperties | undefined = this.getStyleWithOffset();
+    if (color && !isPresetColor(color)) {
+      statusStyle = statusStyle || {};
+      statusStyle.background = color;
+    }
+
     return hidden ? null : (
       <ScrollNumber
         prefixCls={scrollNumberPrefixCls}
@@ -158,7 +165,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
         count={displayCount}
         displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
         title={this.getScrollNumberTitle()}
-        style={this.getStyleWithOffset()}
+        style={statusStyle}
         key="scrollNumber"
       />
     );