如何修改AWS Amplify认证服务默认的Sign In和Create Account页面？

方法一：使用Amplify UI主题配置（推荐） #

Amplify UI自带主题系统，可直接通过变量覆盖默认样式，无需编写大量自定义CSS。

• 先在React项目中导入主题工具：

  import { ThemeProvider, createTheme } from '@aws-amplify/ui-react';
  

• 定义自定义主题，修改按钮颜色、字体等核心样式：

  const customTheme = createTheme({
    name: 'custom-auth-theme',
    tokens: {
      colors: {
        brand: {
          primary: {
            800: '#003a8c', // 按钮主色
          },
        },
      },
      fonts: {
        default: {
          family: 'Arial, sans-serif', // 全局默认字体
        },
      },
      components: {
        button: {
          backgroundColor: '{colors.brand.primary.800}',
          _hover: {
            backgroundColor: '#002d6b',
          },
        },
        heading: {
          fontFamily: 'Georgia, serif', // 标题字体
        },
      },
    },
  });
  

• 用ThemeProvider包裹应用或认证组件：

  function App() {
    return (
      <ThemeProvider theme={customTheme}>
        {/* 应用内容，包含Amplify认证组件 */}
        <AmplifySignIn />
        <AmplifySignUp />
      </ThemeProvider>
    );
  }
  

方法二：自定义CSS覆盖默认样式 #

如果主题配置无法满足需求，可直接通过CSS选择器覆盖Amplify生成的元素样式。

• 打开浏览器开发者工具，定位认证页面元素的类名（比如登录按钮类名为amplify-button，输入框为amplify-input）。
• 在全局CSS文件（如App.css）中添加自定义样式：

  /* 修改按钮背景色与字体 */
  .amplify-button {
    background-color: #2563eb !important;
    font-family: 'Helvetica Neue', sans-serif;
  }
  
  /* 修改输入框字体与边框 */
  .amplify-input {
    font-family: 'Courier New', monospace;
    border-color: #94a3b8;
  }
  
  /* 修改标题文字样式 */
  .amplify-heading {
    color: #1e293b;
    font-weight: 600;
  }
  

提示：若样式不生效，可添加!important强制覆盖，或确保自定义CSS文件在Amplify默认样式之后加载。

方法三：完全自定义认证组件 #

需要深度定制页面布局、添加额外元素时，可替换默认认证组件，自行编写UI。

• 导入Amplify认证核心逻辑，构建自定义登录组件：

  import { useAuthenticator } from '@aws-amplify/ui-react';
  
  function CustomSignIn() {
    const { signIn, formFields, handleChange } = useAuthenticator((context) => [context.signIn]);
  
    return (
      <div className="custom-signin-container">
        <h2 style={{ fontFamily: 'Georgia' }}>自定义登录</h2>
        {formFields.map((field) => (
          <div key={field.name}>
            <label style={{ fontFamily: 'Arial' }}>{field.label}</label>
            <input
              type={field.type}
              name={field.name}
              value={field.value}
              onChange={handleChange}
              style={{
                padding: '8px',
                border: '1px solid #ccc',
                borderRadius: '4px',
                fontFamily: 'Arial'
              }}
            />
          </div>
        ))}
        <button
          onClick={signIn}
          style={{
            backgroundColor: '#2563eb',
            color: 'white',
            padding: '10px 20px',
            border: 'none',
            borderRadius: '4px',
            fontFamily: 'Arial'
          }}
        >
          登录
        </button>
      </div>
    );
  }
  

• 在应用中用自定义组件替换默认的AmplifySignIn：

  function App() {
    return (
      <Authenticator>
        {({ signOut, user }) => (
          <div>
            <p>欢迎, {user.username}</p>
            <button onClick={signOut}>退出</button>
          </div>
        )}
        <CustomSignIn slot="sign-in" />
      </Authenticator>
    );
  }
  

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