css - 如何从 Angular/Amplify/Cognito 登录页面删除 "Sign in with AWS"按钮？

Question

我目前正在使用 Angular/Congito/Amplify 让用户登录我的网站。该功能完美运行，但我无法找到编辑设计(颜色/按钮等)的方法。

目前我的登录页面如下所示:

我的目标是删除“使用 AWS 登录”按钮并更改橙色文本和橙色登录背景按钮颜色的配色方案。

下面是我的app.component.html

<app-header *ngIf="authState === 'signedin'"></app-header><br>

<amplify-authenticator *ngIf="authState !== 'signedin'"></amplify-authenticator>

<router-outlet *ngIf="authState === 'signedin'"></router-outlet>

<app-footer *ngIf="authState === 'signedin'"></app-footer>

这是我的 app.component.css(我可以在其中进行身份验证。我在此处添加的颜色没有任何作用。

  amplify-authenticator {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100vh;
    --button-background-color: #00D5A1;
    background-color: #0000;

  }

我可以通过导航找到主题:angular-master\node_modules@aws-amplify\ui\src\Theme.css

但这并没有帮助。任何建议将不胜感激。

Answer 1

我刚刚解决了这个问题。

“使用 AWS 登录”按钮从联合组件加载。

解决方案是用一个空的 div 覆盖 amplify-sign-in 中的插槽。

例如:

<amplify-authenticator
  *ngIf="authState !== 'signedin'">
  <amplify-sign-in slot="sign-in" usernameAlias="phone_number" hideSignUp>
    <div slot="federated-buttons"></div>
  </amplify-sign-in>
</amplify-authenticator>

<div *ngIf="authState === 'signedin' && user" class="App">
  <amplify-sign-out></amplify-sign-out>
  <div>Hello, {{user.username}}</div>
  <!-- This is where you application template code goes -->
</div>

Resulting UI