From 565002bf78b0374b6b9f411df95d5e342f4ce626 Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Mon, 22 Nov 2021 17:51:00 +0800
Subject: [PATCH] fix(date-picker): css specificity

---
 .../__snapshots__/index.spec.js.snap          | 98 +++++++++----------
 .../src/date-picker/date-picker.less          | 10 +-
 .../src/date-picker/src/day-picker-panel.vue  | 10 +-
 .../date-picker/src/month-picker-panel.vue    | 10 +-
 .../src/date-picker/src/panel-header.vue      | 23 +----
 5 files changed, 68 insertions(+), 83 deletions(-)

diff --git a/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
index 8166253dfe2..8531fce6cc3 100644
--- a/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
@@ -14,7 +14,7 @@ exports[`test allowedDates prop 1`] = `
     <transition-stub>
       <div class=\\"var-day-picker__panel\\">
         <div class=\\"var-day-picker__content\\">
-          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round var-date-picker-main__color\\" style=\\"filter: opacity(0.54);\\">
+          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></div>
             </button>
@@ -22,7 +22,7 @@ exports[`test allowedDates prop 1`] = `
               <transition-stub>
                 <div>2021 三月</div>
               </transition-stub>
-            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round var-date-picker-main__color\\" style=\\"filter: opacity(0.54);\\">
+            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></div>
             </button>
@@ -62,7 +62,7 @@ exports[`test datePicker style and type 1`] = `
     <transition-stub>
       <div class=\\"var-month-picker__panel\\">
         <div class=\\"var-month-picker__content\\">
-          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round var-date-picker-main__color\\" style=\\"filter: opacity(0.54);\\">
+          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></div>
             </button>
@@ -70,58 +70,58 @@ exports[`test datePicker style and type 1`] = `
               <transition-stub>
                 <div>2021</div>
               </transition-stub>
-            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round var-date-picker-main__color\\" style=\\"filter: opacity(0.54);\\">
+            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></div>
             </button>
           </div>
           <transition-stub>
             <ul>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">一月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">二月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">三月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">四月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-month-picker__button\\" style=\\"background: rgb(123, 184, 114);\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-month-picker__button\\" style=\\"background: rgb(123, 184, 114);\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"false\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">五月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">六月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">七月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">八月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">九月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">十月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">十一月</div>
                 </button></li>
-              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button var-date-picker-main__color\\" var-month-picker-cover=\\"\\">
+              <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-month-picker__button\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                   <!--v-if-->
                   <div class=\\"var-button__content\\">十二月</div>
                 </button></li>
@@ -148,7 +148,7 @@ exports[`test datePicker style and type 2`] = `
     <transition-stub>
       <div class=\\"var-day-picker__panel\\">
         <div class=\\"var-day-picker__content\\">
-          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round var-date-picker-main__color\\" style=\\"filter: opacity(0.54);\\">
+          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></div>
             </button>
@@ -156,7 +156,7 @@ exports[`test datePicker style and type 2`] = `
               <transition-stub>
                 <div>2021 五月</div>
               </transition-stub>
-            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round var-date-picker-main__color\\" style=\\"filter: opacity(0.54);\\">
+            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"filter: opacity(0.54);\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></div>
             </button>
@@ -197,127 +197,127 @@ exports[`test datePicker style and type 2`] = `
                     <!--v-if-->
                     <div class=\\"var-button__content\\"></div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">1</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">2</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">3</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">4</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">5</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">6</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">7</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">8</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">9</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">10</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">11</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">12</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">13</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">14</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">15</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">16</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">17</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">18</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"false\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">19</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">20</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">21</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">22</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">23</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">24</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">25</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">26</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">27</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">28</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">29</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">30</div>
                   </button></li>
-                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable var-date-picker-main__color\\" var-day-picker-cover=\\"\\">
+                <li><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--round var-day-picker__button var-day-picker__button--usable\\" var-day-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
                     <!--v-if-->
                     <div class=\\"var-button__content\\">31</div>
                   </button></li>
diff --git a/packages/varlet-ui/src/date-picker/date-picker.less b/packages/varlet-ui/src/date-picker/date-picker.less
index bbffb37dca1..c4544f16010 100644
--- a/packages/varlet-ui/src/date-picker/date-picker.less
+++ b/packages/varlet-ui/src/date-picker/date-picker.less
@@ -192,6 +192,10 @@
       width: 100%;
       max-width: var(--month-picker-item-button-max-width);
     }
+
+    &__button[var-date-picker-color-cover='true'] {
+      color: var(--date-picker-main-color);
+    }
   }
 
   .var-year-picker {
@@ -250,10 +254,10 @@
       height: var(--day-picker-content-item-button-height);
       font-size: var(--day-picker-content-item-button-font-size);
     }
-  }
 
-  &-main__color {
-    color: var(--date-picker-main-color);
+    &__button[var-date-picker-color-cover='true'] {
+      color: var(--date-picker-main-color);
+    }
   }
 
   &-translatey-enter-from {
diff --git a/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
index 1b383c9c17d..cc99a142a54 100644
--- a/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
+++ b/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
@@ -227,22 +227,22 @@ export default defineComponent({
         return true
       }
 
-      const textColorOrClass = (): string => {
+      const textColorOrCover = (): string => {
         if (disabled) return ''
         if (computeOutline()) return color ?? ''
         if (dayExist()) return ''
 
-        return 'var-date-picker-main__color'
+        return 'var-date-picker-color-cover'
       }
 
-      const isClass = textColorOrClass().startsWith('var-date-picker')
+      const isCover = textColorOrCover().startsWith('var-date-picker')
 
       return {
         disabled,
         text: computeText(),
         outline: computeOutline(),
-        textColor: isClass ? '' : textColorOrClass(),
-        class: isClass ? textColorOrClass() : '',
+        textColor: isCover ? '' : textColorOrCover(),
+        'var-date-picker-color-cover': isCover,
       }
     }
 
diff --git a/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
index 64009b0f31a..473773ae8c5 100644
--- a/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
+++ b/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
@@ -169,23 +169,23 @@ export default defineComponent({
         return true
       }
 
-      const textColorOrClass = (): string => {
+      const textColorOrCover = (): string => {
         if (disabled) return ''
         if (computeOutline()) return color ?? ''
         if (monthExist()) return ''
 
-        return 'var-date-picker-main__color'
+        return 'var-date-picker-color-cover'
       }
 
-      const isClass = textColorOrClass().startsWith('var-date-picker')
+      const isCover = textColorOrCover().startsWith('var-date-picker')
 
       return {
         disabled,
         outline: computeOutline(),
         text: computeText(),
         color: !computeText() ? color : '',
-        textColor: isClass ? '' : textColorOrClass(),
-        class: isClass ? textColorOrClass() : '',
+        textColor: isCover ? '' : textColorOrCover(),
+        'var-date-picker-color-cover': isCover,
       }
     }
 
diff --git a/packages/varlet-ui/src/date-picker/src/panel-header.vue b/packages/varlet-ui/src/date-picker/src/panel-header.vue
index 4735bbbfa44..a8cf31cb46a 100644
--- a/packages/varlet-ui/src/date-picker/src/panel-header.vue
+++ b/packages/varlet-ui/src/date-picker/src/panel-header.vue
@@ -1,13 +1,6 @@
 <template>
   <div class="var-picker-header">
-    <var-button
-      round
-      text
-      :class="getClass('left')"
-      style="filter: opacity(0.54)"
-      :disabled="disabled.left"
-      @click="checkDate('prev')"
-    >
+    <var-button round text style="filter: opacity(0.54)" :disabled="disabled.left" @click="checkDate('prev')">
       <var-icon name="chevron-left" />
     </var-button>
     <div class="var-picker-header__value" @click="$emit('check-panel')">
@@ -15,14 +8,7 @@
         <div :key="showDate">{{ showDate }}</div>
       </transition>
     </div>
-    <var-button
-      round
-      text
-      :class="getClass('right')"
-      style="filter: opacity(0.54)"
-      :disabled="disabled.right"
-      @click="checkDate('next')"
-    >
+    <var-button round text style="filter: opacity(0.54)" :disabled="disabled.right" @click="checkDate('next')">
       <var-icon name="chevron-right" />
     </var-button>
   </div>
@@ -74,10 +60,6 @@ export default defineComponent({
       return pack.value.lang === 'zh-CN' ? `${previewYear} ${monthName}` : `${monthName} ${previewYear}`
     })
 
-    const getClass = (position: 'left' | 'right') => {
-      return props.disabled[position] ? '' : 'var-date-picker-main__color'
-    }
-
     const checkDate = (checkType: string) => {
       emit('check-date', checkType)
       reverse.value = checkType === 'prev'
@@ -95,7 +77,6 @@ export default defineComponent({
       reverse,
       showDate,
       checkDate,
-      getClass,
     }
   },
 })