Allowed internal component styles to be ignored, in the case that external styles are being used instead.

Author: joeflack4

dist-modules/sidebar.js

@@ -265,9 +265,9 @@ var Sidebar = function (_Component) {
   }, {
     key: 'render',
     value: function render() {
-      var sidebarStyle = _extends({}, defaultStyles.sidebar, this.props.styles.sidebar);
-      var contentStyle = _extends({}, defaultStyles.content, this.props.styles.content);
-      var overlayStyle = _extends({}, defaultStyles.overlay, this.props.styles.overlay);
+      var sidebarStyle = _extends({}, this.props.externalStylesOnly ? {} : defaultStyles.sidebar, this.props.styles.sidebar);
+      var contentStyle = _extends({}, this.props.externalStylesOnly ? {} : defaultStyles.content, this.props.styles.content);
+      var overlayStyle = _extends({}, this.props.externalStylesOnly ? {} : defaultStyles.overlay, this.props.styles.overlay);
       var useTouch = this.state.dragSupported && this.props.touch;
       var isTouching = this.isTouching();
       var rootProps = {
@@ -379,7 +379,8 @@ var Sidebar = function (_Component) {
         }),
         _react2.default.createElement(
           'div',
-          { className: this.props.contentClassName, style: contentStyle },
+          { className: this.props.contentClassName,
+            style: contentStyle },
           dragHandle,
           this.props.children
         )
@@ -403,6 +404,9 @@ Sidebar.propTypes = {
     dragHandle: _propTypes2.default.object
   }),
 
+  // Are styles loaded via an external source / stylesheet? If so, sets no styles on the component.
+  externalStylesOnly: _propTypes2.default.bool,
+
   // root component optional class
   rootClassName: _propTypes2.default.string,
 
@@ -460,6 +464,7 @@ Sidebar.defaultProps = {
   dragToggleDistance: 30,
   onSetOpen: function onSetOpen() {},
   styles: {},
+  externalStylesOnly: false,
   defaultSidebarWidth: 0
 };
 

src/sidebar.js

@@ -218,9 +218,9 @@ class Sidebar extends Component {
   }
 
   render() {
-    const sidebarStyle = {...defaultStyles.sidebar, ...this.props.styles.sidebar};
-    const contentStyle = {...defaultStyles.content, ...this.props.styles.content};
-    const overlayStyle = {...defaultStyles.overlay, ...this.props.styles.overlay};
+    const sidebarStyle = {...this.props.externalStylesOnly ? {} : defaultStyles.sidebar, ...this.props.styles.sidebar};
+    const contentStyle = {...this.props.externalStylesOnly ? {} : defaultStyles.content, ...this.props.styles.content};
+    const overlayStyle = {...this.props.externalStylesOnly ? {} : defaultStyles.overlay, ...this.props.styles.overlay};
     const useTouch = this.state.dragSupported && this.props.touch;
     const isTouching = this.isTouching();
     const rootProps = {
@@ -328,7 +328,8 @@ class Sidebar extends Component {
              tabIndex="0"
              onClick={this.overlayClicked}
           />
-        <div className={this.props.contentClassName} style={contentStyle}>
+        <div className={this.props.contentClassName}
+             style={contentStyle}>
           {dragHandle}
           {this.props.children}
         </div>
@@ -350,6 +351,9 @@ Sidebar.propTypes = {
     dragHandle: PropTypes.object,
   }),
 
+  // Are styles loaded via an external source / stylesheet? If so, sets no styles on the component.
+  externalStylesOnly: PropTypes.bool,
+
   // root component optional class
   rootClassName: PropTypes.string,
 
@@ -407,6 +411,7 @@ Sidebar.defaultProps = {
   dragToggleDistance: 30,
   onSetOpen: () => {},
   styles: {},
+  externalStylesOnly: false,
   defaultSidebarWidth: 0,
 };