Question 45718 in CSS Question posted in
Some basic documentation can be found here.

How can I style this Facebook sign in component? – CSS

I’m new to react and I have the function component which is a Facebook sign in button but I don’t know how to style it,is there a way to style a signin button by facebook or google?

here is the code for (facebooklogin.js):

import React from "react";
import {LoginSocialFacebook} from "reactjs-social-login";
import {FacebookLoginButton} from "react-social-login-buttons";
import  {useState} from 'react';
import styled from "styled-components";




function FacebookLogin()   {
    const [profile, setProfile] = useState(null);
    return(
        <div>
        {!profile ? <LoginSocialFacebook
      appId="922883705581488"
      onResolve={(response) => {
        console.log(response);
        setProfile(response.data);
      }}
      onReject={(error) => {
        console.log(error);
      }}
      >
        <FacebookLoginButton />
      </LoginSocialFacebook>: ''}
  
      {profile ? <div>
        <h1>{profile.name}</h1>
        <img src={profile.picture.data.url} />
        
         </div>: ''}
      </div>
  

   
    );
}
export default FacebookLogin

the code for (App.js):

import FacebookLogin from "./Components/facebooklogin";
import GoogleLogin from "./Components/GoogleLogin";
import { Component } from "react";
import styled from "styled-components";

import './App.css';

class App extends Component { 
    render(){ 
 return (
    <div className="App">

     
   <FacebookLogin></FacebookLogin>

  
   

   
   </div>
 );
}
}

export default App;

I tried style it through a class name but did not work

Tags:

2

Answers


  1. 0

    It seems you are using a package for the buttons.

    According to the docs, you can create your own button component and apply your styles. For example, to recreate a <FacebookLoginButton/> you can do:

    // components/CustomFacebookLoginButton.jsx
import React from "react";
import {createButton} from "react-social-login-buttons";

const config = {
  text: "Log in with Facebook",
  icon: "facebook",
  iconFormat: name => `fa fa-${name}`, // if you are using font-awesome
  style: { background: "#3b5998" },
  activeStyle: { background: "#293e69" }
};

const CustomFacebookLoginButton = createButton(config);

export default CustomFacebookLoginButton ;

    Then simply use it as:

    import CustomFacebookLoginButton from '../components/CustomFacebookLoginButton.jsx';

<LoginSocialFacebook ... >
  <CustomFacebookLoginButton />
</LoginSocialFacebook>
    Login or Signup to reply.
  2. 0

    I tried this library. I found 3 approaches.

    import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { FacebookLoginButton, createButton } from "react-social-login-buttons";

const CustomFacebookLoginButton = createButton({
  text: "Log in with Facebook 2",
  icon: "clock",
  iconFormat: name => `fa fa-${name}`, // for this icon you should include the font-awesome icon package 
  style: {
    background: "green"
  }
});

function App() {
  // The styling on the FacebookLoginButton is set on the element's style attribute.
  // I found 3 approaches to override this.
  return (<div>
      option 1: Use a custom component. see: https://www.npmjs.com/package/react-social-login-buttons#create-your-own-button
      <CustomFacebookLoginButton /> 
      option 2: Use style attribute.
      <FacebookLoginButton style={{ background: "red" }} />
      option 3: Use a class with `!important` styling rules. 
      <FacebookLoginButton className="_withCustomClass" />
    </div>
  );
}

    ._withCustomClass {
  background: yellow !important;
  /* important is needed to override element level styling */
}

    I’ve also added the code here: https://codesandbox.io

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search