如何使用ReactJs自定义Facebook登录按钮

解决方法 #

你遇到的问题核心是react-facebook-login组件默认会加载Facebook官方的内置样式，优先级高于你自定义的样式，且默认渲染的按钮结构和你要的设计不匹配，按以下步骤修改即可：

1. 给Facebook登录组件添加disableDefaultStyle={true}属性，关闭组件自带的默认样式，让自定义样式可以生效
2. 使用组件的render属性自定义按钮的渲染结构，和你已有的Google登录按钮结构保持一致，示例代码如下：

import FacebookLogin from 'react-facebook-login';

// 组件内调用部分
<FacebookLogin
  appId="YOUR_FACEBOOK_APP_ID"
  fields="name,email,picture"
  callback={handleFacebookLogin}
  disableDefaultStyle={true}
  render={({ onClick }) => (
    <button onClick={onClick} className="social-login-btn facebook-login-btn">
      <i className="fab fa-facebook-f" />
      <span>使用Facebook登录</span>
    </button>
  )}
/>

3. 补充对应的CSS样式，和Google登录按钮的样式对齐即可，示例样式参考：

.social-login-btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.facebook-login-btn {
  background-color: #1877F2;
}

.facebook-login-btn:hover {
  background-color: #166FE5;
}

如果修改后还有样式冲突，可以给自定义的CSS选择器增加权重（比如加父级选择器前缀，或添加!important声明）覆盖残留的默认样式。

内容的提问来源于stack exchange，提问作者Oybek Toshmatov