From f58615dc35283efc536719662b75e5908481633f Mon Sep 17 00:00:00 2001
From: lixiaoyang <lixiaoyang2345@gmail.com>
Date: Fri, 5 May 2017 14:26:55 +0800
Subject: [PATCH] feat: Notification supports className and style (#6014)

* notification add className and style

Message add className and style

* revert message
---
 components/message/index.tsx                 | 10 +++---
 components/notification/demo/custom-style.md | 33 ++++++++++++++++++++
 components/notification/index.tsx            |  6 +++-
 3 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 components/notification/demo/custom-style.md

diff --git a/components/message/index.tsx b/components/message/index.tsx
index fb23cd0d89..953f8cb7f6 100755
--- a/components/message/index.tsx
+++ b/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;
 }
 
diff --git a/components/notification/demo/custom-style.md b/components/notification/demo/custom-style.md
new file mode 100644
index 0000000000..a291d104a1
--- /dev/null
+++ b/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);
+````
diff --git a/components/notification/index.tsx b/components/notification/index.tsx
index 0e1304797c..074cb3dbe6 100755
--- a/components/notification/index.tsx
+++ b/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,
   });
 }