diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index c44b0972557..049776665d1 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate } from '../../index';
 
-import { createThemedClasses, getClassList } from '../../utils/theme';
+import { createThemedClasses, getClassMap } from '../../utils/theme';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 
@@ -176,11 +176,7 @@ export class Modal implements OverlayInterface {
       ...this.componentProps,
       modal: this.el
     };
-    const classes = [
-      ...getClassList(this.cssClass),
-      'ion-page'
-    ];
-    this.usersElement = await attachComponent(this.delegate, container, this.component, classes, componentProps);
+    this.usersElement = await attachComponent(this.delegate, container, this.component, ['ion-page'], componentProps);
     return present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation);
   }
 
@@ -222,6 +218,7 @@ export class Modal implements OverlayInterface {
   hostData() {
     return {
       'no-router': true,
+      class: getClassMap(this.cssClass),
       style: {
         zIndex: 20000 + this.overlayId,
       }
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index b4d1dbe4d5e..0640f0a10aa 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate } from '../../index';
 
-import { createThemedClasses, getClassList } from '../../utils/theme';
+import { createThemedClasses, getClassMap } from '../../utils/theme';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 
@@ -186,11 +186,7 @@ export class Popover implements OverlayInterface {
       ...this.componentProps,
       popover: this.el
     };
-    const classes = [
-      ...getClassList(this.cssClass),
-      'popover-viewport'
-    ];
-    this.usersElement = await attachComponent(this.delegate, container, this.component, classes, data);
+    this.usersElement = await attachComponent(this.delegate, container, this.component, ['popover-viewport'], data);
     return present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.ev);
   }
 
@@ -238,7 +234,8 @@ export class Popover implements OverlayInterface {
       },
       'no-router': true,
       class: {
-        ...themedClasses
+        ...themedClasses,
+        ...getClassMap(this.cssClass),
       }
     };
   }