如何从 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-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

Answer 2

您可以用这个 css

删除它

.sign-in-button.sc-amplify-sign-in-button .content.sc-amplify-sign-in-button {
text-align: center;
display: none; }

button.sc-amplify-sign-in-button {
display: none !important; }

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

How to remove "Sign in with AWS" button from Angular/Amplify/Cognito login page?

css

amazon-cognito

angular

aws-amplify