如何去除iframe中Sign In With Google Button的内边距？

因为谷歌登录按钮的iframe属于谷歌域名，受同源策略限制，你没法直接修改iframe内部的DOM样式，下面给两个可行的解决思路：

1. 自定义按钮（推荐） #

直接放弃默认的iframe按钮，用库提供的useGoogleLogin钩子自己实现按钮，完全掌控样式：

import { GoogleOAuthProvider, useGoogleLogin } from '@react-oauth/google';

function CustomGoogleSignIn() {
  const login = useGoogleLogin({
    onSuccess: (tokenRes) => console.log('登录成功', tokenRes),
    onError: () => console.log('登录失败'),
  });

  return (
    <button onClick={login} style={{ border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' }}>
      {/* 这里是你自定义的按钮内容，完全控制内边距 */}
      <div style={{ 
        display: 'flex', 
        alignItems: 'center', 
        padding: '6px 14px', // 这里可以随意调整内边距，去掉绿色区域的多余padding
        border: '1px solid #e0e0e0', 
        borderRadius: '4px',
        backgroundColor: '#fff'
      }}>
        <img 
          src="https://accounts.google.com/favicon.ico" 
          alt="Google图标" 
          style={{ width: '20px', height: '20px', marginRight: '10px' }} 
        />
        <span>使用Google登录</span>
      </div>
    </button>
  );
}

// 全局包裹Provider
function App() {
  return (
    <GoogleOAuthProvider clientId="你的Google客户端ID">
      <CustomGoogleSignIn />
    </GoogleOAuthProvider>
  );
}

这种方式完全避开了iframe的限制，你想怎么调内边距、样式都可以，绿色区域的padding直接在自定义div里设置就行。

2. 尝试库的内置参数（不保证有效） #

如果你非要用默认的iframe按钮，可以试试给GoogleLogin组件传递style或className参数，看是否能影响外层容器的样式，间接抵消内部的padding：

import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';

function App() {
  return (
    <GoogleOAuthProvider clientId="你的客户端ID">
      <GoogleLogin
        onSuccess={(res) => console.log(res)}
        onError={() => console.log('登录失败')}
        style={{ padding: '-8px' }} // 尝试用负padding抵消内部的padding
        className="custom-google-btn" // 也可以写CSS类，用负margin之类的
      />
    </GoogleOAuthProvider>
  );
}

不过因为iframe的同源限制，这种方法大概率无效，还是自定义按钮的方案更可靠。

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