使用Bootstrap深色主题时Google按钮后方出现白色矩形的原因

问题描述 #

页面初始设置Bootstrap深色主题（data-bs-theme="dark"）时，使用@react-oauth/google组件的Google登录按钮后方会出现白色背景；切换为浅色主题时显示正常，若先开启浅色主题再通过浏览器调试工具切换为深色主题，按钮显示也正常。

依赖版本 #

• react@18.3.1
• @react-oauth/google@0.12.1
• react-bootstrap@2.10.4
• bootstrap@5.3.3

相关代码 #

index.html #

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
  <body>
    <div id="root" class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column" style="background: gray;"></div>
  </body>
</html>

App.js #

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';

function App() {
    return (
        <GoogleOAuthProvider clientId="">
            <GoogleLogin
                onSuccess={''}
                onError={() => console.error('Login Failed')}
                theme="filled_black"
            />
        </GoogleOAuthProvider>
  );
}

export default App;

效果对比 #

• 深色主题异常效果：
  
• 浅色主题正常效果：
  

解决方案 #

1. 延迟初始化Google OAuth组件 #

让Bootstrap深色主题样式先加载完成，再渲染Google登录按钮，避免样式冲突：

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';

function App() {
    const [isThemeReady, setIsThemeReady] = useState(false);

    useEffect(() => {
        // 短暂延迟确保主题样式生效
        const timer = setTimeout(() => setIsThemeReady(true), 100);
        return () => clearTimeout(timer);
    }, []);

    return (
        <>
            {isThemeReady && (
                <GoogleOAuthProvider clientId="你的Google客户端ID">
                    <GoogleLogin
                        onSuccess={(res) => console.log(res)}
                        onError={() => console.error('登录失败')}
                        theme="filled_black"
                    />
                </GoogleOAuthProvider>
            )}
        </>
    );
}

export default App;

2. 强制覆盖按钮容器背景样式 #

通过自定义CSS直接将Google按钮容器的背景设为透明，覆盖默认白色：

/* 全局CSS文件或组件内style标签添加 */
.g_id_signin,
.g_id_signin > div {
    background-color: transparent !important;
}

如果iframe内部仍有白色背景，可结合第一种延迟加载的方法使用。

3. 动态切换主题后渲染按钮 #

先临时设置浅色主题，待页面初始化完成后切换回深色主题，再渲染按钮：

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';

function App() {
    const [isReady, setIsReady] = useState(false);

    useEffect(() => {
        document.documentElement.setAttribute('data-bs-theme', 'light');
        setTimeout(() => {
            document.documentElement.setAttribute('data-bs-theme', 'dark');
            setIsReady(true);
        }, 50);
    }, []);

    return (
        <>
            {isReady && (
                <GoogleOAuthProvider clientId="你的Google客户端ID">
                    <GoogleLogin
                        onSuccess={(res) => console.log(res)}
                        onError={() => console.error('登录失败')}
                        theme="filled_black"
                    />
                </GoogleOAuthProvider>
            )}
        </>
    );
}

export default App;

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