feat: ConfigProvider support Carousel className and style properties (#43412)

components/carousel/index.tsx

@@ -39,11 +39,13 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
       dotPosition = 'bottom',
       vertical = dotPosition === 'left' || dotPosition === 'right',
       rootClassName,
+      className: customClassName,
+      style,
       ...props
     },
     ref,
   ) => {
-    const { getPrefixCls, direction } = React.useContext(ConfigContext);
+    const { getPrefixCls, direction, carousel } = React.useContext(ConfigContext);
     const slickRef = React.useRef<any>();
 
     const goTo = (slide: number, dontAnimate = false) => {
@@ -73,6 +75,8 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
 
     const newProps = {
       vertical,
+      className: classNames(customClassName, carousel?.className),
+      style: { ...carousel?.style, ...style },
       ...props,
     };
 

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

@@ -8,6 +8,7 @@ import Badge from '../../badge';
 import Breadcrumb from '../../breadcrumb';
 import Calendar from '../../calendar';
 import Card from '../../card';
+import Carousel from '../../carousel';
 import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
 import Collapse from '../../collapse';
@@ -183,6 +184,41 @@ describe('ConfigProvider support style and className props', () => {
     );
   });
 
+  it('Should Carousel className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        carousel={{
+          className: 'test-class',
+        }}
+      >
+        <Carousel>
+          <div>
+            <h3>test item</h3>
+          </div>
+        </Carousel>
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.slick-slider')).toHaveClass('test-class');
+  });
+
+  it('Should Carousel style works', () => {
+    const { container } = render(
+      <ConfigProvider carousel={{ style: { color: 'red' } }}>
+        <Carousel style={{ fontSize: '16px' }}>
+          <div>
+            <h3>test item 1</h3>
+          </div>
+          <div>
+            <h3>test item 2</h3>
+          </div>
+        </Carousel>
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.slick-slider')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Cascader className & style works', () => {
     const options = [
       {

components/config-provider/context.ts

@@ -102,6 +102,7 @@ export interface ConfigConsumerProps {
   divider?: ComponentStyleConfig;
   drawer?: ComponentStyleConfig;
   calendar?: ComponentStyleConfig;
+  carousel?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
   collapse?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;

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

@@ -109,6 +109,7 @@ const {
 | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | card | Set Card common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -142,6 +142,7 @@ export interface ConfigProviderProps {
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   calendar?: ComponentStyleConfig;
+  carousel?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
   collapse?: ComponentStyleConfig;
   divider?: ComponentStyleConfig;
@@ -276,6 +277,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     statistic,
     spin,
     calendar,
+    carousel,
     cascader,
     collapse,
     typography,
@@ -371,6 +373,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     statistic,
     spin,
     calendar,
+    carousel,
     cascader,
     collapse,
     typography,

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

@@ -111,6 +111,7 @@ const {
 | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |