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

Question

情况：

在我的 Vue 应用程序中，我使用aws 身份验证器来处理登录/注册。
我需要自定义样式，但是由于它的结构是由 shadow 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-colorvar给出 ，在我的情况下需要为白色。但是这样输入的文本在白色背景上是不可见的。

这是 .html 的结构amplify-sign-in。在input里面amplify-input。

这是.input班级的风格。如您所见，颜色由--colorvar控制

这就是--colorvar 所指的：

我的尝试：

我尝试了几种方法，但都没有奏效。我试图针对.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 自定义的文档。不幸的是，文档很差

测试：

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

问题：

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

Answer 1

尝试以下 scss，

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