feat: CP support Breadcrumb className and style (#43095)

* feat: CP support Breadcrumb className and style

* Update BrowserMockup.tsx

* Update Reset.tsx

* Update Responsive.tsx

* Update index.en-US.md

* fix

components/breadcrumb/Breadcrumb.tsx

@@ -95,7 +95,7 @@ const Breadcrumb = (props: BreadcrumbProps) => {
     ...restProps
   } = props;
 
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, breadcrumb } = React.useContext(ConfigContext);
 
   let crumbs: React.ReactNode;
   const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
@@ -203,6 +203,7 @@ const Breadcrumb = (props: BreadcrumbProps) => {
 
   const breadcrumbClassName = classNames(
     prefixCls,
+    breadcrumb?.className,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
@@ -211,8 +212,10 @@ const Breadcrumb = (props: BreadcrumbProps) => {
     hashId,
   );
 
+  const mergedStyle: React.CSSProperties = { ...breadcrumb?.style, ...style };
+
   return wrapSSR(
-    <nav className={breadcrumbClassName} style={style} {...restProps}>
+    <nav className={breadcrumbClassName} style={mergedStyle} {...restProps}>
       <ol>{crumbs}</ol>
     </nav>,
   );

components/config-provider/__tests__/style.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
+import Breadcrumb from '../../breadcrumb';
 import Divider from '../../divider';
 import Image from '../../image';
 import Result from '../../result';
@@ -203,4 +204,17 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-slider');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('Should Breadcrumb className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        breadcrumb={{ className: 'cp-breadcrumb', style: { backgroundColor: 'red' } }}
+      >
+        <Breadcrumb />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLElement>('.ant-breadcrumb');
+    expect(element).toHaveClass('cp-breadcrumb');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });

components/config-provider/context.ts

@@ -117,6 +117,10 @@ export interface ConfigConsumerProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  breadcrumb?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

components/config-provider/index.en-US.md

@@ -101,6 +101,7 @@ const {
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |

components/config-provider/index.tsx

@@ -166,6 +166,10 @@ export interface ConfigProviderProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  breadcrumb?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -261,6 +265,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     image,
     result,
     slider,
+    breadcrumb,
   } = props;
 
   // =================================== Warning ===================================
@@ -320,6 +325,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     image,
     result,
     slider,
+    breadcrumb,
   };
 
   const config = {

components/config-provider/index.zh-CN.md

@@ -103,6 +103,7 @@ const {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |