-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Angular theme suport #2750
Comments
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. @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. |
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. |
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: |
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. |
This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems. |
After some experimentation, I found that adding this to my app's @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 |
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,. |
@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 |
This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs. Looking for a help forum? We recommend joining the Amplify Community Discord server |
** 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:
Should I just be rolling my own here? Or am I just missing something?
Appreciate any help. Thanks.
The text was updated successfully, but these errors were encountered: