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 程序包以呈现< strong>谷歌按钮。

请帮助!!!

Answer 1

以下是使用styled-components

的简化示例

它正在使用你的css并调整它应该的方式。

您可以复制/粘贴此组件并将其导入您的应用程序，这可能有助于解决您的问题。

import React, { Component } from 'react'
import styled from 'styled-components';

const Wrapper = styled.div`
    @media only screen and (max-width : 399px) {
        width: 10%
    }
`

const BtnFacebook = styled.button`
    width: 165px;
    height:35px;  
    border-radius: 4px;
    background: #3b5998;
    color:white;
    border:0px transparent;  
    text-align: center;
    margin:5px;
    display: inline-block;

    &:hover{
        background: #3b5998;
        opacity: 0.6;
    }
`;
const BtnGoogle = styled.button`
    margin:5px;
    width: 165px;
    height:35px;
    border-radius: 4px;
    background: #db3236;
    color:white;
    border:0px transparent;
    text-align: center;

    &:hover{
        background: #3b5998;
        opacity: 0.6;
    }
`
class Login extends Component {
    render() {
        return (
            <div style={{ display: 'flex', flexWrap: 'wrap' }} >
                <Wrapper>
                    <BtnFacebook >
                        &nbsp;&nbsp;Sign In with Facebook
                        </BtnFacebook >
                    <BtnGoogle>
                        &nbsp;&nbsp;Sign In with Google
                        </BtnGoogle >
                </Wrapper>
            </div>
        )
    }
}

export default Login

Answer 2

这似乎对我有用。刚刚完成了对代码的处理。告诉确切的错误。这会有所帮助。在这里我附加了输出。

react-facebook-login按钮样式

2 个答案: