Autofill-Eingabe im Dunkelmodus mit Tailwind

Question

Nachdem ich den Dunkelmodus zum Ausfüllen gespeicherter Passwörter verwendet hatte, stieß ich auf ein Problem mit hässlichen Eingabefarben. Im Lichtmodus ist es gelb, was nicht schlecht ist.

Ich habe hier einige Antworten mit webkit-autofill gefunden, aber ich habe Probleme mit tailwind dark: Ich habe Probleme, es in der Codedatei in sass zu implementieren.

Answer 1

解决方案是将其添加到 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`}。