@aws-amplify/ui-react登录按钮样式与渲染结构不一致问题求助

Hey there! Let’s tackle this frustrating button display issue with your AmplifySignIn component. The root problem here is that when you set hideSignUp={true} and leave the federated-buttons slot empty, the Amplify UI component switches up its footer DOM structure—rendering a full-width-footer-content div instead of the secondary-footer-content span you saw in the Codesandbox example. This is why your login button is stretching to full width and centering, while the example’s button stays sized normally.

Here are a few practical solutions to get your button matching the example’s look:

1. Force the Footer Structure with a Hidden Slot Element #

The simplest fix is to trick the component into rendering the same footer structure as the example by adding a hidden non-empty element to the federated-buttons slot. This keeps the slot from being recognized as empty, so Amplify uses the secondary-footer-content span instead of the full-width div:

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" style={{ display: 'none' }}>
        {/* Hidden element to preserve the example's footer structure */}
        <span></span>
      </div>
    </AmplifySignIn>
  </AmplifyAuthenticator>
)

2. Override the Full-Width Footer CSS #

If you prefer not to modify the slot content, you can directly override the styles of the full-width-footer-content div and its child button. Add this CSS to your project (either in a global stylesheet or a CSS module):

/* Target the full-width footer div */
.amplify-authenticator .full-width-footer-content {
  justify-content: flex-start; /* Match the example's button alignment */
  gap: var(--amplify-space-small); /* Optional: add spacing if needed */
}

/* Reset the button to auto width */
.amplify-authenticator .full-width-footer-content .amplify-button {
  width: auto;
}

Make sure your CSS is loaded after Amplify’s default styles to ensure it takes precedence.

3. Match Amplify UI Versions #

Sometimes these structural differences come from version mismatches between your project and the Codesandbox example. Double-check that your @aws-amplify/ui-react version matches the one used in the example:

• Run npm list @aws-amplify/ui-react in your project terminal to see your current version.
• Compare it to the version in the Codesandbox’s package.json.
• If they differ, update or downgrade your package to match (e.g., npm install @aws-amplify/ui-react@X.X.X where X.X.X is the example’s version).

I’d recommend starting with solution 1 first—it mimics the example’s exact DOM structure without needing to write custom CSS, which should get your button looking right immediately. If that doesn’t work, try adjusting the CSS or aligning your package versions.

内容的提问来源于stack exchange，提问作者Smith Dwayne