logo标签列表

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

javascriptcssamazon-web-servicesvue.jsamazon-cognito
12

情况:

在我的Vue应用程序中，我正在使用AWS认证器来处理登录/注册。
我需要自定义样式，但这有点棘手，因为它的结构是由shadow DOM构成的。

aws authenticator

修改变量：

到目前为止，我只能修改一些amplify变量。

enter image description here

这是我所做的：

: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给出，在我的情况下需要为白色。但是这样输入框的文本在白色背景上不可见。

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

这是.input类的样式。如您所见，颜色由--color变量控制。
enter image description here

这就是--color变量所指的内容： enter image description here

我的尝试：

我尝试了几种方法，但都没有成功。 我尝试过针对.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/authenticator

问题:

如何修改 AWS Authenticator 的输入文本？

你是不是想要这样？https://nimb.ws/E0CZQl - m4n0
是的，我需要能够更改输入文本的颜色，而不影响--amplify-secondary-color变量。 - FrancescoMussi
不要发布您的代码截图，而是以文本形式发布实际代码。 - kissu
我在文本中发布了我的代码。这些是从 Chrome 开发者工具的元素选项卡中拍摄的屏幕截图。它们是默认 AWS Cognito 中使用的输入样式。 - FrancescoMussi
3个回答
1
0
尝试以下的 SCSS：
amplify-sign-in /deep/ {
    amplify-input {
        > input.input {
            color : red !important;
        }
    }
}
谢谢回复。我已经尝试过了，但是没有成功。 - FrancescoMussi
0

既然您正在使用SCSS，那么可以这样做：

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

!important 在这里是可以的，因为你要覆盖第三方的样式。
同时你也可以保留你的 <style lang="scss" scoped>。

正如官方 vue loader 文档所解释的那样：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

如果需要更多细节，这篇文章始终是一个很好的参考：https://dev59.com/XlYN5IYBdhLWcg3wEEcm#55368933

非常感谢您的回复。不幸的是，它似乎不起作用。 - FrancescoMussi
请问您能否详细说明尝试了我的解决方案后的行为？ :) - kissu
CSS规则没有成功影响输入框的实际颜色，它仍然是白色的。 - FrancescoMussi
它是否至少出现在开发工具的CSS计算部分？您有可重现的链接可以分享吗？ - kissu
它既没有出现在样式中，也没有出现在计算选项卡中。不幸的是，我认为无法使用Codepen或类似工具，因为它需要AWS帐户。如果有人感兴趣，我已经编辑了问题并添加了一些关于如何设置Vue示例的说明。 - FrancescoMussi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接