完全自定义Google SSO按钮

Question

我写了流动的代码给Google SSO的身份用户， 但是，当我使用Google API时，它将他们的iframe推向我的代码，并破坏我的项目的样式！ 有人知道一种方法来定义一个单独的按钮，例如下面的代码，当单击它时，Google SSO auth页面将为用户打开？

const googleSSO = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    console.log(google);
    // google.accounts.id.renderButton(document.getElementById('singInDiv'), {
    //   theme: 'outline',
    //   size: 'large',
    //   type: 'icon'
    // });
    return google.accounts.id.initialize({
      client_id:
        'myclientID.apps.googleusercontent.com',
      callback: handleCallbackResponse
    });
  };
 
  return (
    <>
      <IconButton sx={{ ml: 1, mb: 0.5 }} onClick={googleSSO} color="primary">
        <GoogleIcon />
      </IconButton>
      <IconButton sx={{ ml: 1, mb: 0.5 }} onClick={googleSSO} color="primary">
        <GitHubIcon />
      </IconButton>
      <IconButton sx={{ ml: 1, mb: 0.5 }} onClick={googleSSO} color="primary">
        <FacebookIcon />
      </IconButton>
    </>
  );