如何禁用Amplify默认Auth UI中的提交按钮

方案1：CSS快速隐藏 #

这是成本最低的实现方式，直接通过Amplify组件自带的属性选择器定位到默认提交按钮，设置隐藏即可。在你的全局CSS文件中添加如下代码：

/* 仅隐藏登录页的默认提交按钮，不影响其他页面 */
[data-amplify-authenticator] [slot="sign-in"] button[type="submit"] {
  display: none !important;
}

方案2：重写登录插槽（更彻底，无冗余DOM） #

如果你完全不需要账号密码登录功能，只保留第三方Oauth登录，可以直接覆盖整个登录插槽的表单内容，默认的输入框、提交按钮都会自动不渲染。
修改你的代码如下：

import { AmplifyAuthenticator, AmplifySignIn, AmplifyOauthButton } from '@aws-amplify/ui-react';

function App() {
  return (
    <AmplifyAuthenticator>
      <AmplifySignIn slot="sign-in">
        {/* 清空默认表单字段插槽 */}
        <div slot="form-fields"></div>
        <AmplifyOauthButton />
      </AmplifySignIn>
      <div className="App">
        <Users></Users>
      </div>
    </AmplifyAuthenticator>
  );
}

如果你使用的是Amplify UI v2版本 #

v2版本采用自定义组件的配置方式，直接替换登录表单即可：

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

// 自定义登录表单，仅保留Oauth按钮
const customComponents = {
  SignIn: {
    Form: () => <AmplifyOauthButton />,
  },
};

function App() {
  return (
    <Authenticator components={customComponents}>
      {({ signOut }) => (
        <div className="App">
          <Users />
          <button onClick={signOut}>退出登录</button>
        </div>
      )}
    </Authenticator>
  );
}

内容的提问来源于stack exchange，提问作者Ranopriyo Neogy