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规则将被忽略。您可以阅读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')
);

反应Google登录内联样式

2 个答案: