diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss
index da4d81c760..aac1b6630b 100644
--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -127,6 +127,7 @@
 
     &-cancel.nut-dialog-footer-cancel {
       margin-right: $dialog-footer-cancel-margin-right;
+      background: $dialog-footer-cancel-bg;
     }
 
     &-ok {
diff --git a/src/packages/dialog/doc.en-US.md b/src/packages/dialog/doc.en-US.md
index be5260d162..3c2bd7fdec 100644
--- a/src/packages/dialog/doc.en-US.md
+++ b/src/packages/dialog/doc.en-US.md
@@ -159,6 +159,7 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-dialog-footer-justify-content | dialog footer justify content | `space-around` |
 | \--nutui-dialog-footer-button-min-width | dialog footer button min width | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | dialog footer cancel button's margin right | `12px` |
+| \--nutui-dialog-footer-cancel-bg | dialog footer cancel button's bg | `transparent` |
 | \--nutui-dialog-footer-ok-max-width | dialog footer confirm button's max width | `128px` |
 | \--nutui-dialog-vertical-footer-ok-margin-top | dialog vertical footer confirm button margin top | `5px` |
 | \--nutui-dialog-close-width | dialog close the width of the button | `18px` |
diff --git a/src/packages/dialog/doc.md b/src/packages/dialog/doc.md
index ef576381e1..c1ad82c237 100644
--- a/src/packages/dialog/doc.md
+++ b/src/packages/dialog/doc.md
@@ -159,6 +159,7 @@ export default function App() {
 | \--nutui-dialog-footer-justify-content | 对话框底部按钮排布 | `space-around` |
 | \--nutui-dialog-footer-button-min-width | 对话框底部按钮最小宽度 | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | 对话框取消按钮的margin-right | `12px` |
+| \--nutui-dialog-footer-cancel-bg | 取消按钮的背景色 | `transparent` |
 | \--nutui-dialog-footer-ok-max-width | 对话框确认按钮的最大宽度 | `128px` |
 | \--nutui-dialog-vertical-footer-ok-margin-top | 对话框底部按钮纵向排布时的margin值 | `5px` |
 | \--nutui-dialog-close-width | 对话框关闭按钮的宽度 | `18px` |
diff --git a/src/packages/dialog/doc.taro.md b/src/packages/dialog/doc.taro.md
index 894ca49cee..0ee18f4ee6 100644
--- a/src/packages/dialog/doc.taro.md
+++ b/src/packages/dialog/doc.taro.md
@@ -139,6 +139,7 @@ DialogOptions 是 DialogProps 的子集，包含如下属性：title, content, f
 | \--nutui-dialog-footer-justify-content | 对话框底部按钮排布 | `space-around` |
 | \--nutui-dialog-footer-button-min-width | 对话框底部按钮最小宽度 | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | 对话框取消按钮的margin-right | `12px` |
+| \--nutui-dialog-footer-cancel-bg | 取消按钮的背景色 | `transparent` |
 | \--nutui-dialog-footer-ok-max-width | 对话框确认按钮的最大宽度 | `128px` |
 | \--nutui-dialog-vertical-footer-ok-margin-top | 对话框底部按钮纵向排布时的margin值 | `5px` |
 | \--nutui-dialog-close-width | 对话框关闭按钮的宽度 | `18px` |
diff --git a/src/packages/dialog/doc.zh-TW.md b/src/packages/dialog/doc.zh-TW.md
index 68c9b5dda7..a048faf926 100644
--- a/src/packages/dialog/doc.zh-TW.md
+++ b/src/packages/dialog/doc.zh-TW.md
@@ -159,6 +159,7 @@ export default function App() {
 | \--nutui-dialog-footer-justify-content | 對話框底部按鈕排布 | `space-around` |
 | \--nutui-dialog-footer-button-min-width | 對話框底部按鈕最小寬度 | `117px` |
 | \--nutui-dialog-footer-cancel-margin-right | 對話框取消按鈕的margin-right | `12px` |
+| \--nutui-dialog-footer-cancel-bg | 取消按鈕的背景色 | `transparent` |
 | \--nutui-dialog-footer-ok-max-width | 對話框確認按鈕的最大寬度 | `128px` |
 | \--nutui-dialog-vertical-footer-ok-margin-top | 對話框底部按鈕縱向排布時的margin值 | `5px` |
 | \--nutui-dialog-close-width | 對話框關閉按鈕的寬度 | `18px` |
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index 8462f02d5c..83c06b361e 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -1316,6 +1316,7 @@ $dialog-footer-cancel-margin-right: var(
   --nutui-dialog-footer-cancel-margin-right,
   12px
 ) !default;
+$dialog-footer-cancel-bg: var(--nutui-dialog-footer-cancel-bg, transparent);
 $dialog-footer-ok-max-width: var(
   --nutui-dialog-footer-ok-max-width,
   128px
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 84e5ae1574..564802c2f0 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1264,6 +1264,10 @@ $dialog-footer-cancel-margin-right: var(
   --nutui-dialog-footer-cancel-margin-right,
   12px
 ) !default;
+$dialog-footer-cancel-bg: var(
+  --nutui-dialog-footer-cancel-bg,
+  $button-default-background-color
+);
 $dialog-footer-ok-max-width: var(
   --nutui-dialog-footer-ok-max-width,
   128px