feat: ConfigProvider support Alert className and style properties (#43384)

components/alert/Alert.tsx

@@ -120,7 +120,7 @@ const Alert: React.FC<AlertProps> = ({
     warning(!closeText, 'Alert', '`closeText` is deprecated. Please use `closeIcon` instead.');
   }
   const ref = React.useRef<HTMLDivElement>(null);
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -164,6 +164,7 @@ const Alert: React.FC<AlertProps> = ({
       [`${prefixCls}-banner`]: !!banner,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
+    alert?.className,
     className,
     rootClassName,
     hashId,
@@ -190,7 +191,7 @@ const Alert: React.FC<AlertProps> = ({
           ref={ref}
           data-show={!closed}
           className={classNames(alertCls, motionClassName)}
-          style={{ ...style, ...motionStyle }}
+          style={{ ...alert?.style, ...style, ...motionStyle }}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
           onClick={onClick}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import ConfigProvider from '..';
 import { fireEvent, render } from '../../../tests/utils';
+import Alert from '../../alert';
 import Anchor from '../../anchor';
 import Avatar from '../../avatar';
 import Badge from '../../badge';
@@ -516,6 +517,34 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Alert className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        alert={{
+          className: 'test-class',
+        }}
+      >
+        <Alert message="Test Message" />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-alert')).toHaveClass('test-class');
+  });
+
+  it('Should Alert style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        alert={{
+          style: { color: 'red' },
+        }}
+      >
+        <Alert style={{ fontSize: '16px' }} message="Test Message" />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-alert')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Anchor className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -94,6 +94,7 @@ export interface ConfigConsumerProps {
   select?: ComponentStyleConfig & {
     showSearch?: boolean;
   };
+  alert?: ComponentStyleConfig;
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;

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

@@ -101,6 +101,7 @@ const {
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| alert | Set Alert common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | avatar | Set Avatar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | badge | Set Badge common props | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -138,6 +138,7 @@ export interface ConfigProviderProps {
   popupMatchSelectWidth?: boolean;
   popupOverflow?: PopupOverflow;
   theme?: ThemeConfig;
+  alert?: ComponentStyleConfig;
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   cascader?: ComponentStyleConfig;
@@ -248,6 +249,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     children,
     csp: customCsp,
     autoInsertSpaceInButton,
+    alert,
     anchor,
     form,
     locale,
@@ -340,6 +342,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   const baseConfig = {
     csp,
     autoInsertSpaceInButton,
+    alert,
     anchor,
     locale: locale || legacyLocale,
     direction,

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

@@ -103,6 +103,7 @@ const {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| alert | 设置 Alert 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | avatar | 设置 Avatar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |