Блог

Я использую @aws-amplify/ui-react в своем проекте. Я вызвал только AmplifySignIn компонент и без какой-либо регистрации. Я экспортировал образец проекта из 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>
 
 

Я использовал тот же код в своем проекте и попытался имитировать пользовательский интерфейс с помощью того же, что и в примере проекта. Но размер кнопки входа отличается между образцом проекта и моим реальным проектом.

Пользовательский интерфейс образца проекта:

Тот же код, отображающий кнопку входа, как показано ниже:

Несмотря на то, что я использую тот же CSS, почему вход в систему полностью центрирован в моем представлении?

Кроме того, я попытался посмотреть на элемент так, как он отображается в браузере. В примере проекта я вижу слот(содержимое нижнего колонтитула), добавленный с пустым интервалом, как показано ниже

Но в моем проекте я вижу еще один раздел, добавленный вместе с классом full-width-footer-content .

Как я могу решить эту проблему, чтобы моя кнопка входа была похожа на образец проекта? Я не силен в CSS. Но попробуйте имитировать то же самое, что и в проекте.

Заранее спасибо.

Самый быстрый способ устранить эту проблему-перезаписать CSS, созданный библиотекой aws-amplifyui.

В файле styles.css добавьте следующий код:

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