Inline styles overriding className styles

[developer239]

This line: https://github.com/anthonyjgrove/react-google-login/blob/master/src/google-login.js#L193

Creates inline styles. Virtually all css rules coming from external css files are ignored.

[cfanoulis]

Can we actually solve this? It's pretty annoying and there is 0 refference of it in the docs

[developer239]

@cfanoulis You can use inline-styles too 😅

[cfanoulis]

@developer239 mind elaborating 👀

[developer239]

@cfanoulis

Instead of using the component like this: styled(GoogleLoginButton) or like this <GoogleLoginButton className="your-custom-class" />

You should be able to override the styles like this: <GoogleLoginButton style={yourCustomStyle} /> 🙂

[itshim]

@cfanoulis Unfortunately, inline styles are also not working

[marcosschroh]

The same for me. Is not working

[Assdi]

giving className is working for me like this <GoogleLogin clientId={process.env.REACT_APP_GOOGLE_CLIENTID} className='signIn' style={this.state.sty} buttonText="sign In ?" onSuccess={this.responseGoogle} onFailure={this.responseGoogle} />

[aditrades]

Inline styles not really working. Does anybody found a way for styling the button?

[awkward-minion]

Same here, None of the styles are being applied to button

      <GoogleLogin
        clientId="apps.googleusercontent.com"
        onSuccess={responseGoogle}
        onFailure={responseGoogle}
        cookiePolicy={"single_host_origin"}
        theme="light"
        style={{
          textAlign:'center'
          alignItems:'center',
          borderRadius: 50,
            justifyContent: "center",
         }}
      />

[ankitmhatre]

Do we have any progress for inline styles overriding the default style ?

[moon004]

The only way i can override the styling is by using the render prop like so as shown on the Readme.

const myCustomStyle = {
  // My custom style here
}
render={renderProps => (
      <button onClick={renderProps.onClick} disabled={renderProps.disabled} style={myCustomStyle}>This is my custom Google button</button>
    )}

[cfanoulis]

I think it's time to fork

[anthonyjgrove]

I think it's time to fork

Or you could open a PR to fix it