css - 如何修改 firebase 提供给我的 auth 按钮的默认 css/样式？

Question

我正在使用 Firebase 身份验证，它为我提供了 Gmail 和 Facebook 的按钮。我想更改它们的样式(这样我就可以使它们响应)，但我似乎无法访问 CSS。

我尝试选择并更改我在浏览器控制台中看到的类名，但这没有用。

我能做什么？

import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "../firebase.js";

const uiConfig = {
    // Popup signin flow rather than redirect flow.
    signInFlow: "popup",
    // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
    signInSuccessUrl: "/",
    // We will display Google and Facebook as auth providers.
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
    ]
};

 render() {
        return (
            <div>
                {this.state.isSignedIn ? (
                    <div>
                        <div>
                            welcome {firebase.auth().currentUser.displayName}
                        </div>
                    </div>
                ) : (
                    <StyledFirebaseAuth
                        uiConfig={uiConfig}
                        firebaseAuth={firebase.auth()}
                    />
                )}
            </div>
        );
    }

Answer 1

我们可以在我们的元素中导入 firebaseui.css，它工作得很好。

import 'firebaseui/dist/firebaseui.css'

来源:VueJS Stackoverflow answer for same question