diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less
index 32659fd15..590cd7daa 100644
--- a/src/action-sheet/index.less
+++ b/src/action-sheet/index.less
@@ -56,9 +56,4 @@
     font-size: @action-sheet-close-icon-size;
     line-height: inherit;
   }
-
-  &--safe-area-inset-bottom {
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
-  }
 }
diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx
index d40f219b1..517113212 100644
--- a/src/action-sheet/index.tsx
+++ b/src/action-sheet/index.tsx
@@ -118,7 +118,7 @@ function ActionSheet(
 
   return (
     <Popup
-      class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
+      class={bem()}
       position="bottom"
       round={props.round}
       value={props.value}
@@ -128,6 +128,7 @@ function ActionSheet(
       lockScroll={props.lockScroll}
       getContainer={props.getContainer}
       closeOnClickOverlay={props.closeOnClickOverlay}
+      safeAreaInsetBottom={props.safeAreaInsetBottom}
       {...inherit(ctx, true)}
     >
       {Header()}
diff --git a/src/popup/README.md b/src/popup/README.md
index 262ee6b4d..f30a69074 100644
--- a/src/popup/README.md
+++ b/src/popup/README.md
@@ -134,7 +134,7 @@ export default {
 | close-icon | Close icon name | *string* | `cross` | 2.2.0 |
 | transition | Transition | *string* | `popup-slide` | - |
 | get-container | Return the mount node for Popup | *string \| () => HTMLElement* | - | - |
-
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | 2.2.1 |
 
 ### Events
 
diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md
index 084a1bfa6..3e32c8f6b 100644
--- a/src/popup/README.zh-CN.md
+++ b/src/popup/README.zh-CN.md
@@ -145,6 +145,7 @@ export default {
 | close-icon | 关闭图标名称或图片链接 | *string* | `cross` | 2.2.0 |
 | transition | 动画类名，用法与 Vue 原生`transtion`组件的`name`属性一致 | *string* | - | - |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
+| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | 2.2.1 |
 
 ### Events
 
diff --git a/src/popup/index.js b/src/popup/index.js
index a9fec90a5..5002baeb9 100644
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -12,6 +12,7 @@ export default createComponent({
     duration: Number,
     closeable: Boolean,
     transition: String,
+    safeAreaInsetBottom: Boolean,
     closeIcon: {
       type: String,
       default: 'cross'
@@ -63,7 +64,11 @@ export default createComponent({
         <div
           vShow={this.value}
           style={style}
-          class={bem({ round, [position]: position })}
+          class={bem({
+            round,
+            [position]: position,
+            'safe-area-inset-bottom': this.safeAreaInsetBottom
+          })}
           onClick={this.onClick}
         >
           {this.slots()}
diff --git a/src/popup/index.less b/src/popup/index.less
index 3e5d2ace2..9a7645506 100644
--- a/src/popup/index.less
+++ b/src/popup/index.less
@@ -63,6 +63,11 @@
       }
     }
 
+    &--safe-area-inset-bottom {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
     &-slide-top-enter,
     &-slide-top-leave-active {
       transform: translate3d(0, -100%, 0);