AWS Cognito - 如何自定义输入字段？

Question

情况：

在我的 Vue 应用程序中，我使用 aws authenticator 来处理登录/注册。
我需要自定义样式，但这有点棘手，因为它的结构是由影子 DOM 组成的。

修改变量：

到目前为止，我只设法修改了一些放大变量。

我就是这样做的：

:root {
  --amplify-background-color: transparent;
  --amplify-secondary-color: white;
  --amplify-primary-contrast: white;
  --amplify-primary-color: #E00C1D;
}

旁注。定位 amplify-sign-in 而不是 :root 也可以，但从逻辑上讲，这种样式仅适用于登录表单，不适用于注册 (amplify-sign-up) 表单。
自定义样式定位 :root 适用于登录和注册表单。

自定义输入字段：

这就是我卡住的地方。 输入中文本的颜色由--amplify-secondary-color var 给出，在我的例子中它需要是白色的。但是这样输入的文本在白色背景上是不可见的。

这是amplify-sign-in 的HTML 结构。 input 在 amplify-input 内。

这是.input 类的样式。如您所见，颜色由--color var

控制

这就是--color var 所指的内容：

我的尝试：

我尝试了几种方法，但都没有奏效。 我试图以.input 类、input、amplify-input 为目标，或者更改--color 变量。

这些是一些尝试：

:host {
  --color: red !important;
}

:host(.input) {
  color: red !important;
  --color: red !important;
}

amplify-input {
  --color: red !important;

  & .input {
    color:red !important;
    --color: red !important;
  }
}

文档：

这是关于 css 自定义的docs。不幸的是，文档很差

测试：

使用 Vue 设置工作示例的最快方法是从 amplify-js-samples 包中设置此示例：https://github.com/aws-amplify/amplify-js-samples/tree/main/samples/vue/auth/authenticator

问题：

如何修改 aws 验证器的输入文本？

Answer 1

由于你使用的是 SCSS，你可以这样做

::v-deep amplify-input input[type='email'] { // can of course be more specific here
  color: red !important;
}

!important 在这里很好，因为它是您要覆盖的第 3 方。
您也可以通过这种方式保留您的<style lang="scss" scoped>。

正如官方 vue 加载器文档中所述：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

有关更多详细信息，此帖子始终是一个很好的参考：https://stackoverflow.com/a/55368933/8816585

Answer 2

试试下面的scss，

amplify-sign-in /deep/ {
    amplify-input {
        > input.input {
            color : red !important;
        }
    }
}