时间戳

首页 > 解决方案 > React Google 登录内联样式

reactjs - React Google 登录内联样式

问题描述

我正在使用 google-login 包。我试图更新按钮的背景图像和尺寸，它似乎不起作用或者我做错了吗？我在文档中找不到任何关于如何实现内联样式的示例。我刚刚读到它是一个对象，这是我的代码。

 <GoogleLogin
    className="rounded-circle"
    icon={false}
    clientId={process.env.REACT_APP_CLIENT_ID}
    buttonText=""
    onSuccess={this.responseGoogle}
    onFailure={this.responseGoogle}
    style={{  backgroundImage:url(${val.image.url}),
       width:50,
       height:50  
   }}
 />

插件对此的任何帮助都会有所帮助。

标签： reactjs

解决方案

似乎不可能，您可以使用自定义渲染方法。

 <GoogleLogin
    clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
    render={renderProps => (
      <button onClick={renderProps.onClick} style={customStyle}>This is my custom Google button</button>
    )}
    buttonText="Login"
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
/>

您可以在此处查看，来自外部 css 文件的 css 规则将被忽略。您可以在此处和此处阅读

或者您可以使用替代插件：react-google-button

推荐阅读