fix(theme): hydration error in NavHamburger and fix Search color (#2697)

SoonIter · web-flow · commit 78dbdd624cc8 · 2025-10-29T17:40:15.000+08:00
diff --git a/e2e/fixtures/nav-link-item-with-hash/index.test.ts b/e2e/fixtures/nav-link-item-with-hash/index.test.ts
@@ -38,6 +38,6 @@ test.describe('basic test', async () => {
     await expect(navScreen).toHaveClass(/rp-nav-screen--open/);
 
     await page.getByRole('link', { name: 'PageC' }).click();
-    await expect(navScreen).not.toHaveClass(/rp-nav-screen--open/);
+    expect(await navScreen.isVisible()).toBe(false);
   });
 });
diff --git a/packages/core/src/theme/components/NavHamburger/index.tsx b/packages/core/src/theme/components/NavHamburger/index.tsx
@@ -30,7 +30,7 @@ export function NavHamburger() {
 
   return (
     <>
-      {typeof window !== 'undefined' &&
+      {isScreenOpen &&
         createPortal(
           <NavScreen isScreenOpen={isScreenOpen} toggleScreen={toggleScreen} />,
           document.getElementById('__rspress_modal_container')!,
diff --git a/packages/core/src/theme/components/Search/SuggestItem.scss b/packages/core/src/theme/components/Search/SuggestItem.scss
@@ -4,29 +4,29 @@
   margin: 5px 2px;
 
   .dark &,
-  .dark & > a {
+  .dark & .rp-suggest-item__link {
     box-shadow: none;
   }
 
-  & > a {
+  & .rp-suggest-item__link {
+    color: var(--rp-c-text-1);
     background-color: var(--rp-c-bg);
     border-radius: var(--rp-radius-small);
     padding-left: 12px;
-    color: var(--rp-c-black-soft);
     display: flex;
     width: 100%;
     box-shadow: 0 1px 3px 0 #d4d9e1;
   }
 
   &--current {
-    > a {
+    .rp-suggest-item__link {
       background-color: var(--rp-c-brand);
       cursor: pointer;
       color: #ffffff;
     }
 
     .rp-suggest-item__container {
-      svg {
+      .rp-suggest-item__icon {
         color: #ffffff;
       }
 
@@ -57,10 +57,10 @@
     align-items: center;
     font-weight: 500;
     padding-right: 12px;
+  }
 
-    svg {
-      color: var(--rp-c-gray-light-1);
-    }
+  &__icon {
+    color: var(--rp-c-gray-light-1);
   }
 
   &__content {
@@ -76,7 +76,6 @@
 
   &__statement {
     font-size: 0.875rem;
-    color: var(--rp-c-text-2);
     width: 100%;
   }
 
diff --git a/packages/core/src/theme/components/Search/SuggestItem.tsx b/packages/core/src/theme/components/Search/SuggestItem.tsx
@@ -122,13 +122,14 @@ export function SuggestItem({
     >
       <Link
         href={suggestion.link}
+        className="rp-suggest-item__link"
         onClick={e => {
           closeSearch();
           e.stopPropagation();
         }}
       >
         <div className="rp-suggest-item__container">
-          <div>
+          <div className="rp-suggest-item__icon">
             <SvgWrapper icon={HitIcon} />
           </div>
           <div className="rp-suggest-item__content">
