@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;
}