fix(PageHeader): ghost style (#6761)

* test(pageheader): update test snap

* fix: ghost style

* fix: ghost style

* chore(pageheader): update ghost demo

* test(pageheader): update test snap

components/page-header/__tests__/__snapshots__/demo.test.js.snap

@@ -867,7 +867,6 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
             class="ant-space-item"
           >
             
-            <!---->
             <button
               class="ant-btn ant-btn-default ant-dropdown-trigger"
               style="padding: 0px;"
@@ -898,6 +897,7 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
               </span>
               
             </button>
+            <!---->
             
           </div>
           <!---->
@@ -977,6 +977,10 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
   <div
     class="demo-page-header"
     style="background-color: rgb(245, 245, 245); padding: 24px;"
@@ -1250,6 +1254,29 @@ exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = `
       <!---->
     </div>
   </div>
+  <label
+    class="ant-checkbox-wrapper"
+    style="margin-top: 0.5rem;"
+  >
+    <span
+      class="ant-checkbox"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+    <span>
+      
+      toggle ghost
+      
+    </span>
+  </label>
+  
+</div>
 `;
 
 exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
@@ -1663,7 +1690,6 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
             class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
           >
             
-            <!---->
             <button
               aria-controls="null-more-popup"
               aria-expanded="false"
@@ -1696,6 +1722,7 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
                 </svg>
               </span>
             </button>
+            <!---->
             
             <!---->
           </div>

components/page-header/demo/ghost.vue

@@ -19,7 +19,7 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
 <template>
   <div class="demo-page-header" style="background-color: #f5f5f5; padding: 24px">
     <a-page-header
-      :ghost="false"
+      :ghost="ghost"
       title="Title"
       sub-title="This is a subtitle"
       @back="() => $router.go(-1)"
@@ -42,7 +42,12 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
       </a-descriptions>
     </a-page-header>
   </div>
+  <a-checkbox v-model:checked="ghost" style="margin-top: 0.5rem">toggle ghost</a-checkbox>
 </template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+const ghost = ref(false);
+</script>
 <style scoped>
 .demo-page-header :deep(tr:last-child td) {
   padding-bottom: 0;

components/page-header/style/index.ts

@@ -26,7 +26,7 @@ const genPageHeaderStyle: GenerateStyle<PageHeaderToken, CSSObject> = token => {
       padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`,
       backgroundColor: token.colorBgContainer,
 
-      [`${componentCls}-ghost`]: {
+      [`&${componentCls}-ghost`]: {
         backgroundColor: token.pageHeaderGhostBg,
       },
 
@@ -146,7 +146,7 @@ export default genComponentStyleHook('PageHeader', token => {
     pageHeaderPaddingBreadcrumb: token.paddingSM,
     pageHeaderContentPaddingVertical: token.paddingSM,
     pageHeaderBackColor: token.colorTextBase,
-    pageHeaderGhostBg: 'inherit',
+    pageHeaderGhostBg: 'transparent',
     pageHeaderHeadingTitle: token.fontSizeHeading4,
     pageHeaderHeadingSubTitle: token.fontSize,
     pageHeaderTabFontSize: token.fontSizeLG,