added the disableButtonStyles property

README.md

@@ -97,6 +97,7 @@ One of the props (onAccept) is a function, this function will be called after th
 | style         | object                           | [look at source][style]        | React styling object for the bar.                                                    |
 | buttonStyle   | object                           | [look at source][buttonStyle]  | React styling object for the button.                                                 |
 | contentStyle  | object                           | [look at source][contentStyle] | React styling object for the content.                                                |
+| disableButtonStyles | boolean                    | false         | If enabled the button will have no default style. (you can still supply style through props)       |
 
 ## Debugging it
 

build/index.d.ts

@@ -22,6 +22,7 @@ export interface CookieConsentProps {
   acceptOnScroll?: boolean;
   acceptOnScrollPercentage?: number;
   extraCookieOptions?: object;
+  disableButtonStyles ?: boolean;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

build/index.js

@@ -641,6 +641,7 @@ var CookieConsent = function (_Component) {
       // fire onAccept
 
       onAccept();
+
       // remove listener if set
       window.removeEventListener("scroll", this.handleScroll);
 
@@ -670,7 +671,8 @@ var CookieConsent = function (_Component) {
           containerClasses = _props3.containerClasses,
           contentClasses = _props3.contentClasses,
           buttonClasses = _props3.buttonClasses,
-          buttonId = _props3.buttonId;
+          buttonId = _props3.buttonId,
+          disableButtonStyles = _props3.disableButtonStyles;
 
 
       var myStyle = {};
@@ -678,15 +680,21 @@ var CookieConsent = function (_Component) {
       var myContentStyle = {};
 
       if (disableStyles) {
-        // if styles are disabled use the provided styles (or non)
+        // if styles are disabled use the provided styles (or none)
         myStyle = _extends({}, style);
         myButtonStyle = _extends({}, buttonStyle);
         myContentStyle = _extends({}, contentStyle);
       } else {
         // if styles aren't disabled merge them with the styles that are provided (or use default styles)
         myStyle = _extends({}, _extends({}, this.state.style, style));
-        myButtonStyle = _extends({}, _extends({}, this.state.buttonStyle, buttonStyle));
         myContentStyle = _extends({}, _extends({}, this.state.contentStyle, contentStyle));
+
+        // switch to disable JUST the button styles
+        if (disableButtonStyles) {
+          myButtonStyle = _extends({}, buttonStyle);
+        } else {
+          myButtonStyle = _extends({}, _extends({}, this.state.buttonStyle, buttonStyle));
+        }
       }
 
       // syntactic sugar to enable user to easily select top / bottom
@@ -751,7 +759,8 @@ CookieConsent.propTypes = {
   buttonId: _propTypes2.default.string,
   acceptOnScroll: _propTypes2.default.bool,
   acceptOnScrollPercentage: _propTypes2.default.number,
-  extraCookieOptions: _propTypes2.default.object
+  extraCookieOptions: _propTypes2.default.object,
+  disableButtonStyles: _propTypes2.default.bool
 };
 
 CookieConsent.defaultProps = {
@@ -770,7 +779,8 @@ CookieConsent.defaultProps = {
   contentClasses: "",
   buttonClasses: "",
   buttonId: "",
-  extraCookieOptions: {}
+  extraCookieOptions: {},
+  disableButtonStyles: false
 };
 
 exports.default = CookieConsent;

package.json

@@ -4,7 +4,7 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/index.d.ts

@@ -22,6 +22,7 @@ export interface CookieConsentProps {
   acceptOnScroll?: boolean;
   acceptOnScrollPercentage?: number;
   extraCookieOptions?: object;
+  disableButtonStyles ?: boolean;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

src/index.js

@@ -93,6 +93,7 @@ class CookieConsent extends Component {
 
     // fire onAccept
     onAccept();
+
     // remove listener if set
     window.removeEventListener("scroll", this.handleScroll);
 
@@ -120,6 +121,7 @@ class CookieConsent extends Component {
       contentClasses,
       buttonClasses,
       buttonId,
+      disableButtonStyles
     } = this.props;
 
     let myStyle = {};
@@ -127,15 +129,22 @@ class CookieConsent extends Component {
     let myContentStyle = {};
 
     if (disableStyles) {
-      // if styles are disabled use the provided styles (or non)
+      // if styles are disabled use the provided styles (or none)
       myStyle = Object.assign({}, style);
       myButtonStyle = Object.assign({}, buttonStyle);
       myContentStyle = Object.assign({}, contentStyle);
     } else {
       // if styles aren't disabled merge them with the styles that are provided (or use default styles)
       myStyle = Object.assign({}, { ...this.state.style, ...style });
-      myButtonStyle = Object.assign({}, { ...this.state.buttonStyle, ...buttonStyle });
       myContentStyle = Object.assign({}, { ...this.state.contentStyle, ...contentStyle });
+
+      // switch to disable JUST the button styles
+      if(disableButtonStyles){
+        myButtonStyle = Object.assign({}, buttonStyle);
+      }else{
+        myButtonStyle = Object.assign({}, { ...this.state.buttonStyle, ...buttonStyle });
+      }
+
     }
 
     // syntactic sugar to enable user to easily select top / bottom
@@ -199,7 +208,8 @@ CookieConsent.propTypes = {
   buttonId: PropTypes.string,
   acceptOnScroll: PropTypes.bool,
   acceptOnScrollPercentage: PropTypes.number,
-  extraCookieOptions: PropTypes.object
+  extraCookieOptions: PropTypes.object,
+  disableButtonStyles: PropTypes.bool
 };
 
 CookieConsent.defaultProps = {
@@ -218,7 +228,8 @@ CookieConsent.defaultProps = {
   contentClasses: "",
   buttonClasses: "",
   buttonId: "",
-  extraCookieOptions: {}
+  extraCookieOptions: {},
+  disableButtonStyles: false
 };
 
 export default CookieConsent;