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

Created on 4 Jan 2019  路  11Comments  路  Source: aws-amplify/amplify-js

* 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!

UI Vue feature-request
Source
picture heitorlessa
👍7

Most helpful comment

@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