From 7adbc220bf82bae739c96bc92b2bfad83aee0323 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 14 Dec 2022 01:13:13 +1100
Subject: [PATCH] fix(VOverlay): forward scoped styles attribute

fixes #16213
---
 packages/vuetify/src/components/VOverlay/VOverlay.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
index 60ca2df6516..246504f82a8 100644
--- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx
+++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -14,6 +14,7 @@ import { useBackgroundColor } from '@/composables/color'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { useHydration } from '@/composables/hydration'
 import { useRtl } from '@/composables/locale'
+import { useScopeId } from '@/composables/scopeId'
 import { useStack } from '@/composables/stack'
 import { useTeleport } from '@/composables/teleport'
 import { useToggleScope } from '@/composables/toggleScope'
@@ -149,6 +150,7 @@ export const VOverlay = genericComponent<new () => {
     const { activatorEl, activatorRef, activatorEvents, contentEvents, scrimEvents } = useActivator(props, { isActive, isTop: localTop })
     const { dimensionStyles } = useDimension(props)
     const isMounted = useHydration()
+    const { scopeId } = useScopeId()
 
     watch(() => props.disabled, v => {
       if (v) isActive.value = false
@@ -262,7 +264,8 @@ export const VOverlay = genericComponent<new () => {
                 ]}
                 style={[stackStyles.value, { top: convertToUnit(top.value) }]}
                 ref={ root }
-                {...attrs}
+                { ...scopeId }
+                { ...attrs }
               >
                 <Scrim
                   color={ scrimColor }