Amplify-js: Angular theme suport

[malcomm]

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

[LucasRouckhout]

I had the same issue. I'm building an Angular app and using the 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.

[jarrettj]

Hey,

Good day.

Yup, it really does not play nice with Angular Material. Weird why it would have to mess things up. Should the theme not be specific to amplify components only? Instead of changing global styles.

Regards.

[jordanranz]

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

https://github.com/aws-amplify/amplify-js/issues/3279

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[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:

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

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

}

Basic usage:
```signin.html
        <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.

[andrew-aernos]

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.

My angular app is setup with plain css, what is the way to do this in plan .css? Tried some online scss -> css compiler but it doesn't work,.

[kernwig]

@andrew-aernos The advantage of scss is that you can declare styles in a scope. My first suggestion is to convert your app to use scss. If that is not an option, then my second suggestion is to copy the Amplify Angular stylesheet, and manually put .amplify-block in front of every style in it. (That's basically what the above does.)