[Vue] How to safely override Amplify built-in components via CSS?

** Which Category is your question related to? ** Amplify UI

** What AWS Services are you utilizing? ** Cognito

** Provide additional details e.g. code snippets **

Different from React I can’t pass a theme object to override drop-in components from Amplify for example - <amplify-authenticator>

After some digging I notice it creates a random class at build time .Form__formSection___3tqxz. While I can easily override the typography and color I’m quite sure this will break in upcoming updates.

Is there a safe way to do that or are you working on providing friendly classes one can go and override regardless of what framework (Angular/Vue/React) is using it?

Thanks a lot!

[cliffordh]

@heitorlessa @jordanranz

I created #2470 shortly before you posted this very similar question. I poked around a bit and found a workaround that should at least let you theme the components:

In your App.vue <style> section insert this code and define the colors how you see fit. I changed the built-in Amazon orange to a dark green as an example:

:root {

  /* Colors */
  --amazonOrange: #009900; /* Redefined to dark green */
  --lightAmazonOrange: #FFAC31;
  --darkAmazonOrange: #E88B01;
  --squidInk: #232F3E;
  --lightSquidInk: #31465F;
  --deepSquidInk: #152939;
  --grey: #828282;
  --lightGrey: #C4C4C4;
  --silver: #E1E4EA;
  --darkBlue: #31465F;
  --red: #DD3F5B;
  --white: #FFFFFF;
  --light-blue: #00a1c9;
  }

What you’re doing is overriding the CSS variables which control the theme used by Amplify. Check out https://github.com/aws-amplify/amplify-js/blob/master/packages/amplify-ui/src/Theme.css for more overridable CSS.

I would consider this a hack but it will work for my needs for now… this may not be forwards compatible if the variable names change in Theme.css. I don’t think this issue should be closed but hopefully this workaround will help someone out there in the meantime.

[israelroldan]

Besides using the CSS variables @cliffordh pointed out, you may also come across a moment where you need to remove paddings or change dimensions.

I achieved this by passing an additional class in the route to the authenticator: in router.js:

const router = new Router({
  routes: [
    //...
    {
      path: '/auth',
      name: 'Authenticator',
      component: components.Authenticator,
      props: {
        class: "authenticator" // arbitrary class name
      }
    }
    //...
  ]
});

Then on my App.vue sytle:

.authenticator > div {
    padding: 0;
    min-width: 100%;
    box-shadown: none;
    -webkit-box-shadow: none;
}

I hope this helps someone! 😃