diff --git a/packages/simplebar/demo/Demo.js b/packages/simplebar/demo/Demo.js
index 3f67e555..4f74bffc 100755
--- a/packages/simplebar/demo/Demo.js
+++ b/packages/simplebar/demo/Demo.js
@@ -27,7 +27,10 @@ function menuRenderer(params) {
 
 class Demo extends React.Component {
   componentDidMount() {
-      // new SimpleBar(document.getElementById('manual-instantiation'));
+    new SimpleBar(document.getElementById('manual-instantiation'));
+    new SimpleBar(document.getElementById('with-classnames'), {
+      classNames: { vertical: 'my-custom-class' }
+    });
   }
 
   render() {
@@ -179,6 +182,22 @@ class Demo extends React.Component {
                 </div>
               </div>
           </section>
+        <section>
+          <div className="col">
+            <h2>With custom classnames</h2>
+            <div
+              id="with-classnames"
+              className="demo4"
+              style={{ width: '200px' }}
+            >
+              <div className="box">1</div>
+              <div className="box">2</div>
+              <div className="box">3</div>
+              <div className="box">4</div>
+              <div className="box">5</div>
+            </div>
+          </div>
+        </section>
       </section>
     );
   }
diff --git a/packages/simplebar/src/simplebar.js b/packages/simplebar/src/simplebar.js
index 8cbff78f..961097df 100755
--- a/packages/simplebar/src/simplebar.js
+++ b/packages/simplebar/src/simplebar.js
@@ -17,9 +17,9 @@ export default class SimpleBar {
     this.resizeObserver;
     this.scrollbarWidth;
     this.minScrollbarWidth = 20;
-    this.options = Object.assign({}, SimpleBar.defaultOptions, options);
+    this.options = { ...SimpleBar.defaultOptions, ...options };
+    this.classNames = { ...SimpleBar.defaultOptions.classNames, ...this.options.classNames };
     this.isRtl;
-    this.classNames = this.options.classNames;
     this.axis = {
       x: {
         scrollOffsetAttr: 'scrollLeft',