使用 FirebaseUI 网页版 Google 登录按钮的深色变体？

Question

我正在使用firebaseui-web-react-wrapper并希望将 Google 登录按钮切换为深色版本。在我正在开发的应用程序中，该按钮的容器是白色的，将白色按钮放在白色容器中看起来不太好。

FirebaseUI 默认为 -

我想用-

请注意，深色屏幕截图取自Google 的官方页面，并且遵循 Google 的官方品牌指南。

Answer 1

我只用 CSS 就可以调整它以接近 Google 指南。它并不完美，但比白色的要好得多。

我在 NextJS 应用程序中，使用库存 CSS：import 'firebaseui/dist/firebaseui.css'

另请注意，我没有使用反应包装器，而是import('firebaseui')直接使用。

这是我添加到全局 CSS 中的内容：

/* Overriding FirebaseUI CSS for sign-in button styling */
.firebaseui-idp-google {
  padding: 0 !important;
  border: 1px solid #4285f4 !important;
  background-color: #4285f4 !important;
}

.firebaseui-idp-google > .firebaseui-idp-text {
  color: white !important;
}

.firebaseui-idp-google > .firebaseui-idp-icon-wrapper {
  padding: 10px;
  background-color: white;
}

...这就是结果（它只改变了 Google 按钮）：