Saisie de remplissage automatique en mode sombre à l'aide de Tailwind

Question

Après avoir utilisé le mode sombre pour saisir un mot de passe mémorisé, j'ai rencontré un problème avec la couleur d'entrée qui était moche. En mode clair c'est jaune, ce qui n'est pas mal. J'ai trouvé quelques réponses ici en utilisant webkit-autofill mais j'ai du mal à l'implémenter en utilisant tailwinddark:prop et sass dans le fichier global.scss.

P粉998100648 · Answer

La solution est d'ajouter ceci au fichier 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;
    }
  }
}

Puis ajoutez className={`${styles.input} dark:inputDarkModeOverride`} dans l'attribut d'entrée.