AWS Cognito - How to customise the input fields?

Question

THE SITUATION:

In my Vue app, I am using the aws authenticator to handle login/signup.
I need to customize the style, but it's a bit tricky since its structure is made of shadow DOM.

MODIFYING VARIABLES:

So far I only managed to modify some amplify variables.

This is how I did it:

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

Side note. Targeteting amplify-sign-in instead of :root would also work, but logically that style would apply only for the login form and not for the signup (amplify-sign-up) form.
Custom style targeting :root applies to both login and signup form.

CUSTOMIZE THE INPUT FIELD:

Here is where I got stuck. The color of the text inside the input is given by the --amplify-secondary-color var, which in my case needs to be white. But in this way the text of the input is not visible on a white background.

This is the HTML structure of the amplify-sign-in. The input is inside amplify-input.

This is the style for the .input class. As you can see the color is controlled by the --color var

This is what the --color var refers to:

MY ATTEMPTS:

I have tried several approaches but none worked. I tried to target the .input class, the input, the amplify-input, or to change the --color var.

These are some attempts:

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

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

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

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

THE DOCS:

This are the docs concerning the css customization. Unfortunately the documentation is quite poor

TESTING:

The quickest way to set a working example, using Vue, would be to setup this sample from the amplify-js-samples package: https://github.com/aws-amplify/amplify-js-samples/tree/main/samples/vue/auth/authenticator

THE QUESTION:

How can I modify the input text of the aws authenticator?

Answer 1

It might make sense to update to the latest version of Amplify UI for Vue.

There is updated documentation for styling https://ui.docs.amplify.aws/vue/connected-components/authenticator/customization#css-style

It also links to another page showing all the CSS variables https://ui.docs.amplify.aws/vue/theming/css-variables

The updated version has more granular CSS classes, such as:

• --amplify-colors-font-primary
• --amplify-colors-font-interactive
• --amplify-colors-font-active
• --amplify-colors-font-focus

Answer 2

Try following scss,

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

Answer 3

Since you're using SCSS, you may do it like this

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

The !important is fine here, since it's a 3rd party that you're overriding.
Also you can keep your <style lang="scss" scoped> this way.

As explained in the official vue loader documentation: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

For more details, this post is always an excellent reference: https://stackoverflow.com/a/55368933/8816585