@aws-amplify/ui-react 登錄按鈕 position 自定義

Question

我在我的項目中使用@aws-amplify/ui-react 。 我只調用了AmplifySignIn組件，沒有任何 SignUp。 我從Codesandbox導出了一個示例項目並開始進行一些定制。 這是我的登錄代碼。

const SignIn = () => (
  <AmplifyAuthenticator style={{
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundImage: `url(${backgroundImage})`,
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
  }}>
    
    <AmplifySignIn hideSignUp={true} slot="sign-in" headerText="" usernameAlias="email" >
      <div slot="federated-buttons">
      </div>
    </AmplifySignIn>
 

我在我的項目中使用了相同的代碼，並嘗試使用與示例項目相同的方式來模仿 UI。 但是示例項目和我的真實項目之間的登錄按鈕大小不同。

示例項目用戶界面：

顯示登錄按鈕的相同代碼如下所示：

即使我使用相同的 CSS，為什么登錄在我的視圖中完全居中？

此外，我試圖查看元素在瀏覽器中的呈現方式。 在示例項目中，我看到一個插槽（輔助頁腳內容）添加了一個空跨度，如下所示

但是在我的項目中，我看到另一個 div 添加了 class full-width-footer-content 。

我怎樣才能解決這個問題，讓我的登錄按鈕像示例項目一樣顯示？ 我不擅長 CSS。但嘗試模仿與項目相同。

先感謝您。

Answer 1

解決此問題的最快方法是覆蓋 aws-amplifyui 庫生成的 CSS。

在你的styles.css中，添加如下代碼：

.full-width-footer-content {
    width: 153px !important;
    margin-left: auto !important;
}