React Google Login内联样式

Question

我使用的是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  
   }}
 />

Plugin在这方面的任何帮助都会很有帮助。

Answer 1

这似乎是不可能的，你可以使用自定义的渲染方法。

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

你可以检查here，css规则来自外部css文件是ignored.You可以读取它的here和here

或者，您可以使用其他插件：react-google-button

Answer 2

实际上，您可以将react-google-login和react-google-button结合使用：

import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
import GoogleButton from 'react-google-button'

ReactDOM.render(
  <GoogleLogin
    clientId="your-google-app-client-id.apps.googleusercontent.com"
    render={renderProps => (
      <GoogleButton onClick={renderProps.onClick} disabled={renderProps.disabled}>Sign in with Google</GoogleButton>
    )}
    onSuccess={responseGoogleSuccess}
    onFailure={responseGoogleFailure}
    cookiePolicy={'single_host_origin'}
  />,
  document.getElementById('googleButton')
);