如何隐藏Amplify默认登录表单中的注册链接？

针对你遇到的问题，这里提供几种可靠的解决方法：

1. 利用Amplify UI的内置配置（推荐） #

Amplify的Authenticator组件本身支持直接隐藏注册选项，不需要额外修改样式。以React为例，在组件初始化时配置hideSignUp参数即可：

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

function App() {
  return (
    <Authenticator
      authOptions={{
        hideSignUp: true, // 直接隐藏注册入口
        signUpAttributes: [] // 可选：清空注册所需属性，彻底禁用注册流程
      }}
    >
      {({ signOut, user }) => (
        <main>
          <h1>欢迎 {user.username}</h1>
          <button onClick={signOut}>退出登录</button>
        </main>
      )}
    </Authenticator>
  );
}
export default App;

这个方法从根源上移除了注册相关的入口，比样式隐藏更可靠。

2. 自定义CSS强制隐藏注册链接 #

如果你的场景无法修改组件配置，可以通过CSS定位登录界面底部的注册链接元素，强制隐藏。Amplify UI的注册链接有固定类名，直接设置：

.amplify-footer__sign-up-link {
  display: none !important;
}

添加!important是为了覆盖Amplify的默认样式优先级，确保生效。

3. 完全自定义登录组件 #

如果你需要更高的控制权，可以抛弃Amplify的默认UI，自己实现登录表单，调用Amplify的Auth核心方法完成登录：

import { useState } from 'react';
import { Auth } from 'aws-amplify';

function CustomLogin() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [errorMsg, setErrorMsg] = useState('');

  const handleLogin = async () => {
    try {
      await Auth.signIn(username, password);
      // 登录成功后跳转或执行其他逻辑
    } catch (err) {
      setErrorMsg(err.message);
    }
  };

  return (
    <div className="login-container">
      <h2>用户登录</h2>
      {errorMsg && <p className="error">{errorMsg}</p>}
      <input
        type="text"
        placeholder="用户名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>登录</button>
    </div>
  );
}
export default CustomLogin;

这种方式完全由你控制界面内容，不会出现任何注册相关元素。

为什么你之前的尝试没生效？ #

• 修改样式无效：Amplify UI部分组件使用了Shadow DOM隔离样式，普通的样式选择器无法穿透，需要使用组件暴露的类名或强制优先级。
• 隐藏注册表单组件没用：注册链接属于登录表单的 footer 区域，并不在注册表单组件内部，所以隐藏注册表单不会影响登录界面的注册链接。

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