diff --git a/src/packages/safearea/safearea.scss b/src/packages/safearea/safearea.scss
index 62b8722282..b04bc6de3a 100644
--- a/src/packages/safearea/safearea.scss
+++ b/src/packages/safearea/safearea.scss
@@ -3,12 +3,18 @@
   width: 100%;
 
   &-position-top {
+    padding-top: calc(
+      constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
+    );
     padding-top: calc(
       env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
     );
   }
 
   &-position-bottom {
+    padding-bottom: calc(
+      constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
+    );
     padding-bottom: calc(
       env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
     );
diff --git a/src/packages/safearea/safearea.taro.tsx b/src/packages/safearea/safearea.taro.tsx
index 714cb7a889..9cb42c1336 100644
--- a/src/packages/safearea/safearea.taro.tsx
+++ b/src/packages/safearea/safearea.taro.tsx
@@ -5,12 +5,17 @@ import { TaroSafeAreaProps } from '@/types'
 
 const classPrefix = 'nut-safe-area'
 export const SafeArea: FC<TaroSafeAreaProps> = (props) => {
+  const { className, style, position, ...rest } = props
+
   return (
     <View
+      {...rest}
       className={classNames(
         classPrefix,
-        `${classPrefix}-position-${props.position}`
+        `${classPrefix}-position-${position}`,
+        className
       )}
+      style={style}
     />
   )
 }
diff --git a/src/packages/safearea/safearea.tsx b/src/packages/safearea/safearea.tsx
index f50e0969eb..2201ab47a1 100644
--- a/src/packages/safearea/safearea.tsx
+++ b/src/packages/safearea/safearea.tsx
@@ -4,12 +4,17 @@ import { WebSafeAreaProps } from '@/types'
 
 const classPrefix = 'nut-safe-area'
 export const SafeArea: FC<WebSafeAreaProps> = (props) => {
+  const { className, style, position, ...rest } = props
+
   return (
     <div
+      {...rest}
       className={classNames(
         classPrefix,
-        `${classPrefix}-position-${props.position}`
+        `${classPrefix}-position-${position}`,
+        className
       )}
+      style={style}
     />
   )
 }