feat: Notification supports className and style (#6014)

* notification add className and style

Message add className and style

* revert message

components/message/index.tsx

@@ -11,11 +11,11 @@ let getContainer;
 
 function getMessageInstance() {
   messageInstance = messageInstance || Notification.newInstance({
-    prefixCls,
-    transitionName: 'move-up',
-    style: { top: defaultTop }, // 覆盖原来的样式
-    getContainer,
-  });
+      prefixCls,
+      transitionName: 'move-up',
+      style: { top: defaultTop }, // 覆盖原来的样式
+      getContainer,
+    });
   return messageInstance;
 }
 

components/notification/demo/custom-style.md

@@ -0,0 +1,33 @@
+---
+order: 6
+title:
+  zh-CN: 自定义样式
+  en-US: Customized style
+---
+
+## zh-CN
+
+使用 style 和 className 来定义样式。
+
+## en-US
+
+The style and className are available to customize Notification.
+
+````jsx
+import { Button, notification } from 'antd';
+
+const openNotification = () => {
+  notification.open({
+    message: 'Notification Title',
+    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+    style: {
+      width: 600,
+      marginLeft: 335 - 600,
+    },
+  });
+};
+
+ReactDOM.render(
+  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
+, mountNode);
+````

components/notification/index.tsx

@@ -54,6 +54,8 @@ export interface ArgsProps {
   icon?: React.ReactNode;
   placement?: notificationPlacement;
   getContainer?: () => HTMLElement;
+  style?: string;
+  className?: string;
 }
 
 export interface ConfigProps {
@@ -124,6 +126,7 @@ function notice(args) {
     ? <span className={`${prefixCls}-message-single-line-auto-margin`} />
     : null;
 
+  const { style, className } = args;
   getNotificationInstance(outerPrefixCls).notice({
     content: (
       <div className={iconNode ? `${prefixCls}-with-icon` : ''}>
@@ -140,7 +143,8 @@ function notice(args) {
     closable: true,
     onClose: args.onClose,
     key: args.key,
-    style: {},
+    style: assign({}, style),
+    className,
   });
 }