Actualmente, Google está cancelando su antiguo "iniciar sesión con Google" y ahora estoy usando sus cosas nuevas que seguí con esta guía en su documentación https://developers.google.com/identity/gsi/web/reference/js-reference

así que para renderizar su botón necesitas hacer esto

importar su cdn en public index.html

 <script src="https://accounts.google.com/gsi/client"></script>

Entonces deberías llamarlo así con React

 useEffect(() => { google.accounts.id.initialize({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: handleCredentialResponse }); google.accounts.id.renderButton(document.getElementById('google-login-button'), { theme: 'outline', size: 'large', }); }, []);

y luego represente el botón en un div como ese (y no, puede pararse de cabeza con CSS y probar todos los trucos de Palor para apuntar a este div, aplicará cierto estilo, pero luego sucede el cambio a este otro botón y no puede diseñar eso en absoluto)

 <div id="google-login-button" className="customGPlusSignIn" />

entonces muestra este botón

entonces, si desea modificarlo, debe diseñarlo con este

 google.accounts.id.renderButton(document.getElementById('google-login-button'), { theme: 'outline', size: 'large', });

PERO aquí viene la parte molesta: salta del botón de estilo PRE anterior a

(en esta imagen es más grande que la real, la real es MUCHO más pequeña que la primera desde la que cambia)

Y puedes pararte de cabeza con CSS y sacar todos los trucos debajo del capó para que permanezca del mismo tamaño, pero no es así. SIEMPRE SE PEGA A ESTE ESTILO.

Realmente quiero usar mi propio botón y no puedo encontrar una manera de configurar google.accounts.id.initialize({ para que funcione con mi propio botón.

¿Alguno de ustedes tiene alguna idea de cómo puedo lograr SIN UTILIZAR UN paquete NPM y permanecer en el CDN de Google Vanilla (la razón por la que NO quiero usar un paquete NPM es porque los paquetes NPM están usando el inicio de sesión ANTIGUO con llamadas a la API de Google y se depreciará el próximo año el 30 de marzo (30 de marzo de 2023)