feat(message): 支持自定义zIndex功能(#2852)

XiaoMi · Jun 4, 2024 · df9f046 · df9f046
1 parent 33f44eb
commit df9f046
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/ui/message/src/Message.tsx b/packages/ui/message/src/Message.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
-import { cx, getPrefixCls } from '@hi-ui/classname'
+import { cx, getPrefixCls, getPrefixStyleVar } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { HiBaseHTMLProps } from '@hi-ui/core'
 import { CSSTransition } from 'react-transition-group'
@@ -35,6 +35,7 @@ export const Message = forwardRef<HTMLDivElement | null, MessageProps>(
       duration = 5000,
       autoClose = true,
       type = 'info',
+      zIndex,
       destroy,
       onClose,
       ...rest
@@ -98,7 +99,13 @@ export const Message = forwardRef<HTMLDivElement | null, MessageProps>(
         }}
       >
         <div ref={motionElRef} className={`${prefixCls}-container`}>
-          <div ref={ref} role={role} className={cls} {...rest}>
+          <div
+            ref={ref}
+            role={role}
+            className={cls}
+            {...rest}
+            style={{ [`${getPrefixStyleVar('z-index')}`]: zIndex }}
+          >
             {messageIconMap[type]}
             {title}
           </div>
@@ -121,6 +128,10 @@ export interface MessageProps extends Omit<HiBaseHTMLProps<'div'>, 'title'> {
    * 通知框标题
    */
   title: React.ReactNode
+  /**
+   * 自定义css展示层级
+   */
+  zIndex?: number
   /**
    * 通知框类型
    */

diff --git a/packages/ui/message/src/styles/message.scss b/packages/ui/message/src/styles/message.scss
@@ -16,6 +16,7 @@ $prefix: '#{$component-prefix}-message' !default;
   line-height: use-text-lineheight('normal');
   background-color: use-color-static('white');
   color: use-color('gray', 700);
+  z-index: var(--hi-v4-z-index, 1000);
 
   &--type {
     &-info {