Allow for custom inline styles to be set on the button

README.md

@@ -152,8 +152,11 @@ Use GoogleLogout button to logout the user from google.
 |   onAutoLoadFinished  | function |                   -         |                  |
 |   buttonText |  string  |             Login with Google        |                  |
 |   className  |  string  |                   -                  |                  |
-|    style     |  object  |                   -                  |                  |
-| disabledStyle|  object  |                   -                  |                  |
+|    style     |  object  |                   -                  |         CSS properties to be set on the button         |
+|    hoveredStyle     |  object  |                   -                  |         Like `style`, but only set when the user hovers over the button         |
+|    activeStyle     |  object  |                   -                  |         Like `style`, but only set when the button is being clicked         |
+| disabledStyle|  object  |                   -                  |         Like `style`, but only set when the `disabled` prop is `true`         |
+|    iconStyle     |  object  |                   -                  |        CSS properties to be set on the `div` which wraps the Google logo. Only set when the `icon` prop is `true`          |
 |   loginHint  |  string  |                   -                  |                  |
 |    prompt    |  string  |                   -                  | Can be 'consent' to force google return refresh token.                |
 |     tag      |  string  |                button                |  sets element tag (div, a, span, etc     |

__test__/__snapshots__/google-login.test.js.snap

@@ -108,7 +108,7 @@ Object {
   "border": "1px solid transparent",
   "borderRadius": 2,
   "boxShadow": "0 2px 2px 0 rgba(0, 0, 0, .24), 0 0 1px 0 rgba(0, 0, 0, .24)",
-  "color": "rgba(0, 0, 0, .54)",
+  "color": "red",
   "display": "inline-flex",
   "fontFamily": "Roboto, sans-serif",
   "fontSize": 14,
@@ -134,7 +134,7 @@ exports[`Google Login With custom class and custom style render the button 1`] =
       "border": "1px solid transparent",
       "borderRadius": 2,
       "boxShadow": "0 2px 2px 0 rgba(0, 0, 0, .24), 0 0 1px 0 rgba(0, 0, 0, .24)",
-      "color": "rgba(0, 0, 0, .54)",
+      "color": "red",
       "display": "inline-flex",
       "fontFamily": "Roboto, sans-serif",
       "fontSize": 14,

index.d.ts

@@ -90,6 +90,9 @@ export interface GoogleLoginProps {
   readonly responseType?: string,
   readonly children?: ReactNode,
   readonly style?: CSSProperties,
+  readonly hoveredStyle?: CSSProperties,
+  readonly activeStyle?: CSSProperties,
+  readonly iconStyle?: CSSProperties,
   readonly icon?: boolean,
   readonly theme?: "light" | "dark",
   readonly tag?: string,

src/add-keys.js

@@ -0,0 +1,9 @@
+export default (targetObj, fromObj) => {
+  if (fromObj) {
+    // Copy object reference to prevent assigning to function parameter.
+    const referenceObjCopy = targetObj
+    Object.keys(fromObj).forEach(key => {
+      referenceObjCopy[key] = fromObj[key]
+    })
+  }
+}

src/google-login.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import useGoogleLogin from './use-google-login'
 import ButtonContent from './button-content'
 import Icon from './icon'
+import addKeys from './add-keys'
 
 const GoogleLogin = props => {
   const [hovered, setHovered] = useState(false)
@@ -17,6 +18,10 @@ const GoogleLogin = props => {
     type,
     className,
     disabledStyle,
+    style,
+    activeStyle,
+    hoveredStyle,
+    iconStyle,
     buttonText,
     children,
     render,
@@ -81,18 +86,21 @@ const GoogleLogin = props => {
     fontWeight: '500',
     fontFamily: 'Roboto, sans-serif'
   }
+  addKeys(initialStyle, style)
 
-  const hoveredStyle = {
+  const buttonHoveredStyle = {
     cursor: 'pointer',
     opacity: 0.9
   }
+  addKeys(buttonHoveredStyle, hoveredStyle)
 
-  const activeStyle = {
+  const buttonActiveStyle = {
     cursor: 'pointer',
     backgroundColor: theme === 'dark' ? '#3367D6' : '#eee',
     color: theme === 'dark' ? '#fff' : 'rgba(0, 0, 0, .54)',
     opacity: 1
   }
+  addKeys(buttonActiveStyle, activeStyle)
 
   const defaultStyle = (() => {
     if (disabled) {
@@ -101,14 +109,14 @@ const GoogleLogin = props => {
 
     if (active) {
       if (theme === 'dark') {
-        return Object.assign({}, initialStyle, activeStyle)
+        return Object.assign({}, initialStyle, buttonActiveStyle)
       }
 
-      return Object.assign({}, initialStyle, activeStyle)
+      return Object.assign({}, initialStyle, buttonActiveStyle)
     }
 
     if (hovered) {
-      return Object.assign({}, initialStyle, hoveredStyle)
+      return Object.assign({}, initialStyle, buttonHoveredStyle)
     }
 
     return initialStyle
@@ -130,7 +138,7 @@ const GoogleLogin = props => {
       className
     },
     [
-      icon && <Icon key={1} active={active} />,
+      icon && <Icon key={1} active={active} iconStyle={iconStyle} />,
       <ButtonContent icon={icon} key={2}>
         {children || buttonText}
       </ButtonContent>

src/icon.js

@@ -1,24 +1,35 @@
 import React from 'react'
+import addKeys from './add-keys'
 
-export default ({ active }) => (
-  <div style={{ marginRight: 10, background: active ? '#eee' : '#fff', padding: 10, borderRadius: 2 }}>
-    <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
-      <g fill="#000" fillRule="evenodd">
-        <path
-          d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
-          fill="#EA4335"
-        />
-        <path d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z" fill="#4285F4" />
-        <path
-          d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
-          fill="#FBBC05"
-        />
-        <path
-          d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
-          fill="#34A853"
-        />
-        <path fill="none" d="M0 0h18v18H0z" />
-      </g>
-    </svg>
-  </div>
-)
+export default ({ active, iconStyle }) => {
+  const initialIconStyle = {
+    marginRight: 10,
+    background: active ? '#eee' : '#fff',
+    padding: 10,
+    borderRadius: 2
+  }
+  addKeys(initialIconStyle, iconStyle)
+
+  return (
+    <div style={initialIconStyle}>
+      <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
+        <g fill="#000" fillRule="evenodd">
+          <path
+            d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
+            fill="#EA4335"
+          />
+          <path d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z" fill="#4285F4" />
+          <path
+            d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
+            fill="#FBBC05"
+          />
+          <path
+            d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
+            fill="#34A853"
+          />
+          <path fill="none" d="M0 0h18v18H0z" />
+        </g>
+      </svg>
+    </div>
+  )
+}