使用 Tailwind 在深色模式下自動填入輸入
P粉745412116
P粉745412116 2023-08-28 08:34:43
0
1
553
<p>使用深色模式填入記住的密碼後,我遇到了輸入顏色難看的問題。 在燈光模式下它是黃的,還不錯。 </p> <p>我在這裡使用<code>webkit-autofill</code> 找到了一些答案,但在使用tailwind <code>dark: </code> prop 和<code>global.scss</ code> 檔案中的sass 實作它時遇到了問題。 </p>
P粉745412116
P粉745412116

全部回覆(1)
P粉998100648

解決方案是將其新增至 global.scss 檔案:

@layer components {
  .inputDarkModeOverride {
    &:-webkit-autofill {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:hover {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:focus {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:active {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }
  }
}

然後在輸入屬性中加入className={`${styles.input} dark:inputDarkModeOverride`}

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!