diff --git a/README.md b/README.md
index d5fafb83..2a5925ea 100644
--- a/README.md
+++ b/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 |
diff --git a/__test__/__snapshots__/google-login.test.js.snap b/__test__/__snapshots__/google-login.test.js.snap
index 838f82c6..1974c4f6 100644
--- a/__test__/__snapshots__/google-login.test.js.snap
+++ b/__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,
diff --git a/index.d.ts b/index.d.ts
index 289263f6..2fe48337 100644
--- a/index.d.ts
+++ b/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,
diff --git a/src/add-keys.js b/src/add-keys.js
new file mode 100644
index 00000000..a4c050a0
--- /dev/null
+++ b/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]
+ })
+ }
+}
diff --git a/src/google-login.js b/src/google-login.js
index 09e17f04..a10dec97 100755
--- a/src/google-login.js
+++ b/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 && ,
{children || buttonText}
diff --git a/src/icon.js b/src/icon.js
index 7de9a7c0..31ebe6a7 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -1,24 +1,35 @@
import React from 'react'
+import addKeys from './add-keys'
-export default ({ active }) => (
-
-)
+export default ({ active, iconStyle }) => {
+ const initialIconStyle = {
+ marginRight: 10,
+ background: active ? '#eee' : '#fff',
+ padding: 10,
+ borderRadius: 2
+ }
+ addKeys(initialIconStyle, iconStyle)
+
+ return (
+
+ )
+}