react-facebook-login 按钮样式

Question

我在登录页面使用 facebook 登录，我的网站完全响应，但我的 facebook 登录按钮没有响应。（即当我使用小屏幕时，facebook 登录按钮应该改变它）请参考下面的图片：

1) 正常情况：

2) 当屏幕被调整为小于 399 的像素时（屏幕宽度 < 400）

3) 我想要的样子（在 PC 或移动设备上调整大小的浏览器中）

我的反应代码是：

<div style={{display: 'flex',flexWrap: 'wrap' }} >                           
    <FacebookLogin
        appId={facebookAppId}
        autoLoad={false}
        fields="name,email,picture"
        callback={this.props.SocialSignUp}
        cssClass="btnFacebook"
        icon={<i className="fa fa-facebook" style{{marginLeft:'5px'}}>
        </i>}
        textButton = "&nbsp;&nbsp;Sign In with Facebook"                                                                
        />
        <GoogleLogin
            clientId={googleClientId}
            onSuccess={this.props.SocialSignUp}
            onFailure={this.props.SocialSignUp}
            className="btnGoogle"
        >
            <i className="fa fa-google-plus" style={{ marginLeft: 
            '5px' }}/> 
            <span>&nbsp;&nbsp;Sign In with Google</span>                                                               
        </GoogleLogin>
</div>

我的 CSS 是

.btnFacebook { 
  width: 165px;
  height:35px;  
  border-radius: 4px;
  background: #3b5998;
  color:white;
  border:0px transparent;  
  text-align: center;
  margin:5px;
  display: inline-block;
}
.btnGoogle { 
  margin:5px;
  width: 165px;
  height:35px;
  border-radius: 4px;
  background: #db3236;
  color:white;
  border:0px transparent;
  text-align: center;
}
.btnFacebook:hover {
  background: #3b5998;
  opacity: 0.6;
}
.btnGoogle:hover {
  background: #db3236;
  opacity: 0.6;
}

@media only screen and (max-width : 399px) {
  .btnFacebook,.btnGoogle{
    width: 100%
  }
}

请注意，我使用react-facebook-login包来渲染facebook按钮和react-google-login包来渲染谷歌按钮。

请帮忙！！！

Answer 1

这似乎对我有用。刚刚对您的代码进行了解决。说出具体的错误。这会有帮助的。这里我附上了输出。