fix(#16659): support className and style for message (#24024)

* fix(#16659): support className and style for message;

* docs(message): update demo custom-style;

components/message/__tests__/__snapshots__/demo.test.js.snap

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/message/demo/custom-style.md correctly 1`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  <span>
+    Customized style
+  </span>
+</button>
+`;
+
 exports[`renders ./components/message/demo/duration.md correctly 1`] = `
 <button
   class="ant-btn"

components/message/demo/custom-style.md

@@ -0,0 +1,30 @@
+---
+order: 6
+title:
+  zh-CN: 自定义样式
+  en-US: Customized style
+---
+
+## zh-CN
+
+使用 `style` 和 `className` 来定义样式。
+
+## en-US
+
+The `style` and `className` are available to customize Message.
+
+```jsx
+import { message, Button } from 'antd';
+
+const success = () => {
+  message.success({
+    content: 'This is a prompt message with custom className and style',
+    className: 'custom-class',
+    style: {
+      marginTop: '50%',
+    },
+  });
+};
+
+ReactDOM.render(<Button onClick={success}>Customized style</Button>, mountNode);
+```

components/message/index.en-US.md

@@ -55,6 +55,8 @@ The properties of config are as follows:
 | onClose | Specify a function that will be called when the message is closed | function | - |
 | icon | Customized Icon | ReactNode | - |
 | key | The unique identifier of the Message | string\|number | - |
+| className | Customized CSS class | string | - |
+| style | Customized inline style | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
 
 ### Global static methods
 

components/message/index.tsx

@@ -60,6 +60,8 @@ export interface ArgsProps {
   onClose?: () => void;
   icon?: React.ReactNode;
   key?: string | number;
+  style?: React.CSSProperties;
+  className?: string;
 }
 
 const iconMap = {
@@ -91,7 +93,8 @@ function notice(args: ArgsProps): MessageType {
       instance.notice({
         key: target,
         duration,
-        style: {},
+        style: args.style || {},
+        className: args.className,
         content: (
           <div className={messageClass}>
             {args.icon || (IconComponent && <IconComponent />)}

components/message/index.zh-CN.md

@@ -49,13 +49,15 @@ title: Message
 
 `config` 对象属性如下：
 
-| 参数     | 说明                                          | 类型           | 默认值 |
-| -------- | --------------------------------------------- | -------------- | ------ |
-| content  | 提示内容                                      | ReactNode      | -      |
-| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number         | 3      |
-| onClose  | 关闭时触发的回调函数                          | Function       | -      |
-| icon     | 自定义图标                                    | ReactNode      | -      |
-| key      | 当前提示的唯一标志                            | string\|number | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| content | 提示内容 | ReactNode | - |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |
+| onClose | 关闭时触发的回调函数 | Function | - |
+| icon | 自定义图标 | ReactNode | - |
+| key | 当前提示的唯一标志 | string\|number | - |
+| className | 自定义 CSS class | string | - |
+| style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
 
 ### 全局方法