diff --git a/dist-modules/sidebar.js b/dist-modules/sidebar.js
index c2e0f904ca..27e7e4ed94 100755
--- a/dist-modules/sidebar.js
+++ b/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
 };
 
diff --git a/src/sidebar.js b/src/sidebar.js
index a5912516e7..426d026236 100755
--- a/src/sidebar.js
+++ b/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,
 };