Angular theme suport

** Which Category is your question related to? ** aws-amplify-angular v2.1.6

** What AWS Services are you utilizing? ** aws-amplify-angular / Cognito

** Provide additional details e.g. code snippets ** I’m just trying to figure out if theme support is there for Angular. React seems to have a ton of support for themes, but Angular seems to have no love.

Getting down to the core, after importing Theme.css it pretty much horks up my entire application’s theme:

@import '~aws-amplify-angular/Theme.css';

Should I just be rolling my own here? Or am I just missing something?

Appreciate any help. Thanks.

[kernwig]

After some experimentation, I found that adding this to my app’s style.scss properly applied the Amplify theme isolated to only where needed:

@import "~@aws-amplify/ui/src/Theme.css";
.amplify-block {
    @import "~@aws-amplify/ui/src/Angular";

    .amplify-container {
        padding-bottom: 2em;
    }
}

Basic usage:

        <div class="amplify-block">
            <amplify-authenticator></amplify-authenticator>
        </div>

The padding-bottom applies some padding to the sign-in/sign-up form under the buttons, which seems like a bug too.

[LucasRouckhout]

I had the same issue. I’m building an Angular app and using the <amplify-authenticator> and when importing the styling it completely screws up the rest of my styling.

A quick look in the actual CSS reveals why this is so. ~aws-amplify-angular/Theme.css' actually contains three other imports:

@import "~@aws-amplify/ui/src/Theme.css";
@import "~@aws-amplify/ui/src/Angular.css";
@import "~@aws-amplify/ui/dist/style.css";

It is the Angular one that contains most of the irritating css.

...
h1 {
  height: 50px;
  font-weight: 500;
}

h2 {
  height: 42px;
  font-weight: 300;
}

h4 {
  height: 28px;
  font-weight: 400;
}

h5 {
  height: 21px;
  font-weight: 400;
}

p {
  height: 16px;
  font-weight: 300;
}
...

So what I did as a workaround was copying the css that I needed from these files, which would be the authenticator, forms and input groups css, and put it in my styles.css. It clutters up your styles.css a bit but you can remove the unwanted styling and change the parts you want.