可以使用 Amplify UI 的自定义组件来实现此功能。以下是一个示例代码，其中展示了一个包含 Google 和 Facebook 登录选项的自定义登录组件：

import React from 'react';
import { SignIn, SignInButton } from 'aws-amplify-react';
import { GoogleButton, FacebookButton } from './SocialButtons';

class CustomSignIn extends SignIn {
  render() {
    return (
      

        
Custom Login Form
        

          

            Username *
            
          
          

            Password *
            
          
          

            Sign In
          
          Sign In with Google
          Sign In with Facebook
        
      
    );
  }
}

export default CustomSignIn;

在代码中， CustomSignIn 组件是继承 SignIn 组件并进行自定义的示例。我们使用 SignInButton 组件来渲染默认的登录按钮，而使用 GoogleButton 和 FacebookButton 组件来渲染自定义的 Google 和 Facebook 登录按钮。在点击自定义按钮时，我们可以通过调用 googleSignIn 和 facebookSignIn 方法来触发联合登录过程。

在使用自定义组件后，我们可以将其传递到 withAuthenticator 方法中，以使用我们自己的登录表单：

import React from 'react';
import Amplify from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';
import CustomSignIn from './CustomSignIn';

Amplify.configure({
  Auth: {
    identityPoolId: 'IDENTITY_POOL_ID',
    region: 'REGION',
    userPoolId: 'USER_POOL_ID',
    userPoolWebClientId: 'USER_POOL_CLIENT_ID',
  },
});

const App = () => {
  return ;
};

export default withAuthenticator(App, { includeGreetings: true });

在实际代码中，我们需要将 IDENTITY_POOL_ID，REGION，USER_POOL_ID 和 USER_POOL_CLIENT_ID 替换为我们自己的 AWS 配置值。此外，在 withAuthenticator 方法中，我们可以传递一些选项，如 includeGreetings 来显示登录后的欢迎信息。