Google 的登录按钮在加载后会调整大小

Question

我正在关注https://developers.google.com/identity/gsi/web/guides/display-button#javascript将 Google 登录添加到我的 ReactJS 应用程序中。

我添加了

 <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }

      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID",
          callback: handleCredentialResponse,
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "filled_blue", size: "large", shape: "pill" } // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      };
</script>

在 中index.html，在我的组件中，我有一个<div id="buttonDiv"></div>.

但是，当我重新加载页面时会发生以下情况：

加载的初始按钮是正确的，但不知何故调整了大小。我在调试器中暂停了JS执行，发现最初的按钮纯粹是divs，但是调整大小后，它用了aniframe代替。

Answer 1

我终于发现了这个问题。如果将宽度设置为浮点数而不是整数，则会出现问题。例如

google.accounts.id.renderButton(
   document.getElementById("buttonDiv"),
   { type: "standard", theme: "filled_blue", size: "large", shape: "rectangular", width: "350.043", logo_alignment: "left" } // customization attributes
);

将导致按钮的宽度调整大小。

然而，

google.accounts.id.renderButton(
       document.getElementById("buttonDiv"),
       { type: "standard", theme: "filled_blue", size: "large", shape: "rectangular", width: "350", logo_alignment: "left" } // customization attributes
    );

将不会。

Answer 2

在CSS中将buttonDiv的id设置为完整，而不是浏览器初始的width auto，我认为它会修复。

#buttonDiv{width : 100% !important;}