时间戳

首页 > 解决方案 > @aws-amplify/ui-react 登录按钮位置自定义

reactjs - @aws-amplify/ui-react 登录按钮位置自定义

问题描述

我@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 来模仿。但是示例项目和我的真实项目之间的登录按钮大小不同。

示例项目 UI：

在此处输入图像描述

显示登录按钮的相同代码如下：

在此处输入图像描述

即使我使用相同的 CSS，为什么登录在我的视图中完全居中？

另外，我尝试查看元素在浏览器中的呈现方式。在示例项目中，我看到添加了一个空跨度的 slot(secondary-footer-content)，如下所示

在此处输入图像描述

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

在此处输入图像描述

如何解决此问题以显示我的登录按钮就像示例项目一样？我不擅长 CSS。但尝试模仿与项目相同的项目。

先感谢您。

标签： reactjsaws-amplify

解决方案

解决此问题的最快方法是覆盖 aws-amplifyui 库生成的 CSS。

在您的 styles.css 中，添加以下代码：

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

推荐阅读