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?

Well yes, I need to be able to change the input text color, without affecting the --amplify-secondary-color var. — FrancescoMussi
Do not post screenshots of your code but the actual code in text. — kissu
I posted my code in text. Those are screenshots taken from the Elements tab of the Chrome Developer tools. They are the style of the input used in the default AWS cognito. — FrancescoMussi

Ezhilisai Ezhilisai · Accepted Answer · 2021-03-09T10:08:36

Try following scss,

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