如何从 Angular/Amplify/Cognito 登录页面中删除“使用 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>

结果用户界面