如何自定义Google reCAPTCHA v2错误/过期消息样式？

针对你用Next.js 14、Tailwind CSS和react-google-recaptcha集成reCAPTCHA v2时遇到的自定义提示无效问题，以下是可行的解决步骤：

核心问题原因 #

reCAPTCHA v2的错误/过期提示是由谷歌通过iframe渲染的，普通组件内样式或Tailwind规则无法穿透iframe隔离，且react-google-recaptcha组件本身不提供自定义提示的配置项，所以直接修改CSS或尝试设置自定义消息会失效。

解决方案步骤 #

1. 隐藏默认提示 #

在全局样式文件（如app/globals.css）中添加以下规则，强制隐藏谷歌的默认提示元素：

/* 隐藏reCAPTCHA默认错误、过期提示气泡 */
.g-recaptcha-error,
.g-recaptcha-bubble {
  display: none !important;
  visibility: hidden !important;
}

如果不想全局生效，可在客户端组件内使用全局样式标签（仅适用于Next.js客户端组件）：

<style jsx global>{`
  .g-recaptcha-error,
  .g-recaptcha-bubble {
    display: none !important;
  }
`}</style>

2. 自定义提示逻辑 #

通过组件的事件回调维护状态，渲染自定义样式的提示信息：

'use client';
import { useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

export default function LoginPage() {
  const [captchaMsg, setCaptchaMsg] = useState('');

  // 验证码过期时触发
  const handleExpired = () => {
    setCaptchaMsg('验证码已过期，请重新完成验证');
  };

  // 验证错误时触发
  const handleError = () => {
    setCaptchaMsg('验证失败，请检查后重试');
  };

  // 验证通过时清除提示
  const handleChange = () => {
    setCaptchaMsg('');
  };

  return (
    <div className="max-w-md mx-auto p-6 space-y-4">
      <h2 className="text-xl font-semibold">登录</h2>
      
      {/* 自定义提示消息 */}
      {captchaMsg && (
        <div className="p-3 bg-red-50 border border-red-200 text-red-600 rounded-md">
          {captchaMsg}
        </div>
      )}

      {/* reCAPTCHA组件 */}
      <ReCAPTCHA
        sitekey="YOUR_RECAPTCHA_SITE_KEY"
        onExpired={handleExpired}
        onError={handleError}
        onChange={handleChange}
        className="transform scale-95" // 可选：调整组件大小适配页面
      />

      <button 
        className="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
        disabled={!!captchaMsg} // 可选：验证错误时禁用登录按钮
      >
        登录
      </button>
    </div>
  );
}

3. 注意事项 #

• 确保组件标记为'use client'：Next.js 14的App Router中，react-google-recaptcha需要在客户端组件中使用
• 替换YOUR_RECAPTCHA_SITE_KEY为你在谷歌后台申请的站点密钥
• 自定义提示的样式可根据Tailwind需求自由调整，无需受限于谷歌的默认样式

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