情况：

在我的Vue应用程序中，我使用aws authenticator来处理登录/注册。
我需要自定义样式，但这有点棘手，因为它的结构是由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-color var给出，在我的例子中，它需要是白色。但是这样，输入的文本在白色背景上是不可见的。
这是amplify-sign-in的HTML结构。input位于amplify-input内部。

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

这就是--color var所指的：

我的尝试：

我尝试了几种方法，但没有一种有效。我尝试以.input类、input、amplify-input为目标，或者更改--color var。
以下是一些尝试：

: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验证器的输入文本？