feat: ConfigProvider support List className and style properties (#43387)

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

@@ -18,6 +18,7 @@ import Form from '../../form';
 import Image from '../../image';
 import Input from '../../input';
 import Layout from '../../layout';
+import List from '../../list';
 import Mentions from '../../mentions';
 import Menu from '../../menu';
 import message from '../../message';
@@ -382,6 +383,44 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ background: 'red' });
   });
 
+  it('Should List className works', () => {
+    const listData = [
+      {
+        title: 'Test Title',
+      },
+    ];
+    const { container } = render(
+      <ConfigProvider
+        list={{
+          className: 'test-class',
+        }}
+      >
+        <List dataSource={listData} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-list')).toHaveClass('test-class');
+  });
+
+  it('Should List style works', () => {
+    const listData = [
+      {
+        title: 'Test Title',
+      },
+    ];
+    const { container } = render(
+      <ConfigProvider
+        list={{
+          style: { color: 'red' },
+        }}
+      >
+        <List style={{ fontSize: '16px' }} dataSource={listData} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-list')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Menu className works', () => {
     const menuItems = [
       {

components/config-provider/context.ts

@@ -107,6 +107,7 @@ export interface ConfigConsumerProps {
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
   layout?: ComponentStyleConfig;
+  list?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;
   modal?: ComponentStyleConfig;
   progress?: ComponentStyleConfig;

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

@@ -119,6 +119,7 @@ const {
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 4.2.0 |
 | layout | Set Layout common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| list | Set List common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | menu | Set Menu common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | message | Set Message common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -151,6 +151,7 @@ export interface ConfigProviderProps {
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
   layout?: ComponentStyleConfig;
+  list?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;
   modal?: ComponentStyleConfig;
   progress?: ComponentStyleConfig;
@@ -279,6 +280,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     steps,
     image,
     layout,
+    list,
     mentions,
     modal,
     progress,
@@ -370,6 +372,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     image,
     input,
     layout,
+    list,
     mentions,
     modal,
     progress,

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

@@ -121,6 +121,7 @@ const {
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | layout | 设置 Layout 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| list | 设置 List 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | menu | 设置 Menu 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | message | 设置 Message 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/list/index.tsx

@@ -75,6 +75,7 @@ function List<T>({
   split = true,
   className,
   rootClassName,
+  style,
   children,
   itemLayout,
   loadMore,
@@ -96,7 +97,7 @@ function List<T>({
   );
   const [paginationSize, setPaginationSize] = React.useState(paginationObj.defaultPageSize || 10);
 
-  const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, renderEmpty, direction, list } = React.useContext(ConfigContext);
 
   const defaultPaginationProps = {
     current: 1,
@@ -176,6 +177,7 @@ function List<T>({
       [`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem(),
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
+    list?.className,
     className,
     rootClassName,
     hashId,
@@ -280,7 +282,7 @@ function List<T>({
 
   return wrapSSR(
     <ListContext.Provider value={contextValue}>
-      <div className={classString} {...rest}>
+      <div style={{ ...list?.style, ...style }} className={classString} {...rest}>
         {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
         {header && <div className={`${prefixCls}-header`}>{header}</div>}
         <Spin {...loadingProp}>