diff --git a/src/notification/Notification.tsx b/src/notification/Notification.tsx
index 420b8fa7c..7e110d9be 100644
--- a/src/notification/Notification.tsx
+++ b/src/notification/Notification.tsx
@@ -76,7 +76,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
   return (
     <div
       className={classNames(`${classPrefix}-notification`, {
-        [`${classPrefix}-notification-theme-${theme}`]: theme,
+        [`${classPrefix}-is-${theme}`]: theme,
       })}
       style={style}
     >
diff --git a/src/notification/__tests__/__snapshots__/Notification.test.tsx.snap b/src/notification/__tests__/__snapshots__/Notification.test.tsx.snap
index 65ad036d9..f07cc74aa 100644
--- a/src/notification/__tests__/__snapshots__/Notification.test.tsx.snap
+++ b/src/notification/__tests__/__snapshots__/Notification.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`base.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="t-notification t-notification-theme-info"
+    class="t-notification t-is-info"
   >
     <div
       class="t-notification__icon"
@@ -79,7 +79,7 @@ exports[`content.jsx 1`] = `
     class="tdesign-demo-block-columns"
   >
     <div
-      class="t-notification t-notification-theme-info"
+      class="t-notification t-is-info"
     >
       <div
         class="t-notification__icon"
@@ -118,7 +118,7 @@ exports[`content.jsx 1`] = `
       </div>
     </div>
     <div
-      class="t-notification t-notification-theme-info"
+      class="t-notification t-is-info"
     >
       <div
         class="t-notification__icon"
@@ -161,7 +161,7 @@ exports[`content.jsx 1`] = `
 exports[`footer.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="t-notification t-notification-theme-info"
+    class="t-notification t-is-info"
   >
     <div
       class="t-notification__icon"
@@ -226,7 +226,7 @@ exports[`icon.jsx 1`] = `
     class="tdesign-demo-block-column"
   >
     <div
-      class="t-notification t-notification-theme-info"
+      class="t-notification t-is-info"
     >
       <div
         class="t-notification__icon"
@@ -265,7 +265,7 @@ exports[`icon.jsx 1`] = `
       </div>
     </div>
     <div
-      class="t-notification t-notification-theme-error"
+      class="t-notification t-is-error"
     >
       <div
         class="t-notification__icon"
@@ -304,7 +304,7 @@ exports[`icon.jsx 1`] = `
       </div>
     </div>
     <div
-      class="t-notification t-notification-theme-warning"
+      class="t-notification t-is-warning"
     >
       <div
         class="t-notification__icon"
@@ -343,7 +343,7 @@ exports[`icon.jsx 1`] = `
       </div>
     </div>
     <div
-      class="t-notification t-notification-theme-success"
+      class="t-notification t-is-success"
     >
       <div
         class="t-notification__icon"
@@ -391,7 +391,7 @@ exports[`operation.jsx 1`] = `
     class="tdesign-demo-block-column"
   >
     <div
-      class="t-notification t-notification-theme-info"
+      class="t-notification t-is-info"
     >
       <div
         class="t-notification__icon"
@@ -446,7 +446,7 @@ exports[`operation.jsx 1`] = `
       </div>
     </div>
     <div
-      class="t-notification t-notification-theme-info"
+      class="t-notification t-is-info"
     >
       <div
         class="t-notification__icon"
@@ -501,7 +501,7 @@ exports[`operation.jsx 1`] = `
       </div>
     </div>
     <div
-      class="t-notification t-notification-theme-info"
+      class="t-notification t-is-info"
     >
       <div
         class="t-notification__icon"
@@ -563,7 +563,7 @@ exports[`operation.jsx 1`] = `
       </div>
     </div>
     <div
-      class="t-notification t-notification-theme-info"
+      class="t-notification t-is-info"
     >
       <div
         class="t-notification__icon"
@@ -633,7 +633,7 @@ exports[`operation.jsx 1`] = `
       </div>
     </div>
     <div
-      class="t-notification t-notification-theme-info"
+      class="t-notification t-is-info"
     >
       <div
         class="t-notification__icon"
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 333db43b1..7e8e6b9ff 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -486,17 +486,17 @@ exports[`ssr snapshot test renders ./src/message/_example/methods.jsx correctly
 
 exports[`ssr snapshot test renders ./src/message/_example/offset.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"tdesign-demo-block-row\\"><div style=\\"width:200px\\" class=\\"t-input__wrap\\" theme=\\"column\\" value=\\"0\\"><div class=\\"t-input t-size-m t-align-left t-is-default\\"><input type=\\"text\\" placeholder=\\"请输入横向偏移量\\" class=\\"t-input__inner\\" value=\\"0\\"/></div></div><div style=\\"width:200px;margin-left:16px\\" class=\\"t-input__wrap\\" theme=\\"column\\" value=\\"0\\"><div class=\\"t-input t-size-m t-align-left t-is-default\\"><input type=\\"text\\" placeholder=\\"请输入纵向偏移量\\" class=\\"t-input__inner\\" value=\\"0\\"/></div></div></div><div class=\\"tdesign-demo-block-row\\" style=\\"position:relative;margin:0 auto;width:500px;height:260px\\"><button style=\\"position:absolute;right:42%;bottom:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">center</span></button><button style=\\"position:absolute;top:0;left:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">top</span></button><button style=\\"position:absolute;left:0;top:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">left</span></button><button style=\\"position:absolute;right:0;top:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">right</span></button><button style=\\"position:absolute;bottom:0;left:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">bottom</span></button><button style=\\"position:absolute;top:0;left:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">top-left</span></button><button style=\\"position:absolute;top:0;right:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">top-right</span></button><button style=\\"position:absolute;bottom:0;left:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">bottom-left</span></button><button style=\\"position:absolute;bottom:0;right:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">bottom-right</span></button></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/notification/_example/base.jsx correctly 1`] = `"<div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">标题名称</span></div><div class=\\"t-notification__content\\">这是一条消息通知</div></div></div>"`;
+exports[`ssr snapshot test renders ./src/notification/_example/base.jsx correctly 1`] = `"<div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">标题名称</span></div><div class=\\"t-notification__content\\">这是一条消息通知</div></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/notification/_example/close-all.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-row\\" data-reactroot=\\"\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">点击打开多个消息</span></button><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">点击关闭多个消息</span></button></div>"`;
 
-exports[`ssr snapshot test renders ./src/notification/_example/content.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-columns\\" data-reactroot=\\"\\"><div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义内容（字符串）</span></div><div class=\\"t-notification__content\\">这是一条消息通知</div></div></div><div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义内容</span></div><div>这是一条消息通知</div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/notification/_example/content.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-columns\\" data-reactroot=\\"\\"><div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义内容（字符串）</span></div><div class=\\"t-notification__content\\">这是一条消息通知</div></div></div><div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义内容</span></div><div>这是一条消息通知</div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/notification/_example/footer.jsx correctly 1`] = `"<div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义底部详情</span></div><div class=\\"t-notification__content\\">这是一条消息通知</div><div class=\\"t-notification__detail\\"><div class=\\"t-notification__detail\\"><span class=\\"t-notification__detail-item\\">重启</span><span class=\\"t-notification__detail-item t-is-active\\">查看详情</span></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/notification/_example/footer.jsx correctly 1`] = `"<div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义底部详情</span></div><div class=\\"t-notification__content\\">这是一条消息通知</div><div class=\\"t-notification__detail\\"><div class=\\"t-notification__detail\\"><span class=\\"t-notification__detail-item\\">重启</span><span class=\\"t-notification__detail-item t-is-active\\">查看详情</span></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/notification/_example/icon.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">普通通知</span></div><div class=\\"t-notification__content\\">这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知</div></div></div><div class=\\"t-notification t-notification-theme-error\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-error\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">危险通知</span></div><div class=\\"t-notification__content\\">这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知</div></div></div><div class=\\"t-notification t-notification-theme-warning\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-warning\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">告警通知</span></div><div class=\\"t-notification__content\\">这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知</div></div></div><div class=\\"t-notification t-notification-theme-success\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled t-is-success\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">成功通知</span></div><div class=\\"t-notification__content\\">这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知</div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/notification/_example/icon.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">普通通知</span></div><div class=\\"t-notification__content\\">这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知</div></div></div><div class=\\"t-notification t-is-error\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-error\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">危险通知</span></div><div class=\\"t-notification__content\\">这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知</div></div></div><div class=\\"t-notification t-is-warning\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-warning\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">告警通知</span></div><div class=\\"t-notification__content\\">这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知</div></div></div><div class=\\"t-notification t-is-success\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled t-is-success\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">成功通知</span></div><div class=\\"t-notification__content\\">这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知</div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/notification/_example/operation.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">超出的文本省略号显示</span></div><div class=\\"t-notification__content\\">文案不限长度，但是展示最大显示三行折行的末尾显示折行末尾显示折行末尾显示折行末尾显示折行末尾显示折行折行末尾显示折行折行末尾显示折行末尾显示折行折行末尾</div><div class=\\"t-notification__detail\\"><div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">查看详情</span></button></div></div></div></div><div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义底部</span></div><div class=\\"t-notification__content\\">使用 props function 自定义底部内容</div><div class=\\"t-notification__detail\\"><div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">查看详情</span></button></div></div></div></div><div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\"><div>自定义标题 <small>我是副标题</small></div></span></div><div class=\\"t-notification__content\\">1. 使用 props function 自定义标题；2. 使用插槽自定义底部内容</div><div class=\\"t-notification__detail\\"><div slot=\\"footer\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\">知道了</span></button></div></div></div></div><div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\"><div>自定义标题 <small>我是副标题</small></div></span></div><div class=\\"t-notification__content\\">1. 使用插槽自定义标题 2. 使用插槽自定义底部内容</div><div class=\\"t-notification__detail\\"><div><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\">重启</span></button><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">稍后提醒我(10s)</span></button></div></div></div></div><div class=\\"t-notification t-notification-theme-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义内容</span></div><div class=\\"t-notification__content\\">使用插槽自定义内容</div><div class=\\"t-notification__detail\\"><div><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\">重启</span></button><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">更多</span></button></div></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/notification/_example/operation.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">超出的文本省略号显示</span></div><div class=\\"t-notification__content\\">文案不限长度，但是展示最大显示三行折行的末尾显示折行末尾显示折行末尾显示折行末尾显示折行末尾显示折行折行末尾显示折行折行末尾显示折行末尾显示折行折行末尾</div><div class=\\"t-notification__detail\\"><div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">查看详情</span></button></div></div></div></div><div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义底部</span></div><div class=\\"t-notification__content\\">使用 props function 自定义底部内容</div><div class=\\"t-notification__detail\\"><div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">查看详情</span></button></div></div></div></div><div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\"><div>自定义标题 <small>我是副标题</small></div></span></div><div class=\\"t-notification__content\\">1. 使用 props function 自定义标题；2. 使用插槽自定义底部内容</div><div class=\\"t-notification__detail\\"><div slot=\\"footer\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\">知道了</span></button></div></div></div></div><div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\"><div>自定义标题 <small>我是副标题</small></div></span></div><div class=\\"t-notification__content\\">1. 使用插槽自定义标题 2. 使用插槽自定义底部内容</div><div class=\\"t-notification__detail\\"><div><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\">重启</span></button><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">稍后提醒我(10s)</span></button></div></div></div></div><div class=\\"t-notification t-is-info\\"><div class=\\"t-notification__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled t-is-info\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-notification__main\\"><div class=\\"t-notification__title__wrap\\"><span class=\\"t-notification__title\\">自定义内容</span></div><div class=\\"t-notification__content\\">使用插槽自定义内容</div><div class=\\"t-notification__detail\\"><div><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\">重启</span></button><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">更多</span></button></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/notification/_example/placement.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"tdesign-demo-block-row\\"><div style=\\"width:130px;display:inline-block;margin:0 20px 36px 0\\" class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-size-m t-align-left t-is-default\\"><input type=\\"text\\" placeholder=\\"请输入横向偏移量\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div style=\\"width:130px;display:inline-block;margin:0 20px 36px 0\\" class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-size-m t-align-left t-is-default\\"><input type=\\"text\\" placeholder=\\"请输入纵向偏移量\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"tdesign-demo-block-row\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">左上角</span></button><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">右上角</span></button></div><div class=\\"tdesign-demo-block-row\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">左下角</span></button><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">右下角</span></button></div></div>"`;