Input autolengkap dalam mod gelap menggunakan Tailwind

Question

Selepas menggunakan mod gelap untuk mengisi kata laluan yang diingati, saya menghadapi masalah dengan warna input yang hodoh. Dalam mod cahaya ia berwarna kuning, yang tidak buruk.

Saya menemui beberapa jawapan di sini menggunakan webkit-autofill tetapi saya menghadapi masalah menggunakan tailwind dark: prop dan global.scss

Answer 1

Penyelesaian adalah untuk menambahkan ini pada fail 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;
    }
  }
}

Kemudian tambah className={`${styles.input} dark:inputDarkModeOverride`} dalam atribut input.