How can I modify the default css / style of the auth buttons that firebase provides me?

Question

I'm using Firebase Authentication, which provides me the buttons for Gmail and Facebook. I'd like to change their styles (so I can make them responsive), but I can't seem to access the CSS.

I tried selecting and changing the class names that I saw in my browser console, but this did not work.

What can I do?

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

We can import firebaseui.css in our project and it is working way too good.

import 'firebaseui/dist/firebaseui.css'

Source: VueJS Stackoverflow answer for same question