如何设置这个 Facebook 登录组件的样式？

Question

我是 React 新手，我有功能组件，它是一个 Facebook 登录按钮，但我不知道如何设置它的样式，有没有办法通过 Facebook 或谷歌设置登录按钮的样式？

这里是 (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 

（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;

我尝试通过类名设置样式但没有用

Answer 1

看来您正在为按钮使用 package。

根据文档，您可以创建自己的按钮组件并应用您的样式。例如，要重新创建一个

<FacebookLoginButton/>

你可以这样做：

// 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 ;

然后简单地使用它作为：

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

<LoginSocialFacebook ... >
  <CustomFacebookLoginButton />
</LoginSocialFacebook>