diff --git a/packages/component-base/src/overlay-class-mixin.js b/packages/component-base/src/overlay-class-mixin.js
index 4f74d68ebf..5d920e5902 100644
--- a/packages/component-base/src/overlay-class-mixin.js
+++ b/packages/component-base/src/overlay-class-mixin.js
@@ -69,7 +69,7 @@ export const OverlayClassMixin = (superclass) =>
       }
 
       // Add new classes based on the overlayClass
-      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ') : [];
+      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ').filter(Boolean) : [];
       if (classesToAdd.length > 0) {
         classList.add(...classesToAdd);
       }
diff --git a/packages/component-base/test/overlay-class-mixin.test.js b/packages/component-base/test/overlay-class-mixin.test.js
index 4124e7124c..b09b4f4af7 100644
--- a/packages/component-base/test/overlay-class-mixin.test.js
+++ b/packages/component-base/test/overlay-class-mixin.test.js
@@ -68,6 +68,28 @@ const runTests = (defineHelper, baseMixin) => {
       expect(overlay.classList.contains('foo')).to.be.true;
       expect(overlay.classList.contains('bar')).to.be.false;
     });
+
+    it('should remove class names when setting empty string', async () => {
+      element.overlayClass = 'foo bar';
+      await nextUpdate(element);
+
+      element.overlayClass = '';
+      await nextUpdate(element);
+
+      expect(overlay.classList.contains('foo')).to.be.false;
+      expect(overlay.classList.contains('bar')).to.be.false;
+    });
+
+    it('should remove class names when setting whitespace string', async () => {
+      element.overlayClass = 'foo bar';
+      await nextUpdate(element);
+
+      element.overlayClass = ' ';
+      await nextUpdate(element);
+
+      expect(overlay.classList.contains('foo')).to.be.false;
+      expect(overlay.classList.contains('bar')).to.be.false;
+    });
   });
 
   describe('custom classes', () => {