From 9504efad850198bdf6062b02db12879b4bf125f2 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 30 Apr 2024 09:18:43 -0500
Subject: [PATCH] fix(VSnackbar): conditionally load layout styles

closes #19717
---
 .../src/components/VSnackbar/VSnackbar.tsx        | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
index 8192bf0e2e3..a96e7a72f28 100644
--- a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
+++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
@@ -10,16 +10,18 @@ import { VProgressLinear } from '@/components/VProgressLinear'
 // Composables
 import { useLayout } from '@/composables'
 import { forwardRefs } from '@/composables/forwardRefs'
+import { VuetifyLayoutKey } from '@/composables/layout'
 import { makeLocationProps } from '@/composables/location'
 import { makePositionProps, usePosition } from '@/composables/position'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { useScopeId } from '@/composables/scopeId'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
+import { useToggleScope } from '@/composables/toggleScope'
 import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'
 
 // Utilities
-import { computed, mergeProps, nextTick, onMounted, onScopeDispose, ref, shallowRef, watch } from 'vue'
+import { computed, inject, mergeProps, nextTick, onMounted, onScopeDispose, ref, shallowRef, watch, watchEffect } from 'vue'
 import { genericComponent, omit, propsFactory, refElement, useRender } from '@/util'
 
 type VSnackbarSlots = {
@@ -96,7 +98,6 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
 
   setup (props, { slots }) {
     const isActive = useProxiedModel(props, 'modelValue')
-    const { mainStyles } = useLayout()
     const { positionClasses } = usePosition(props)
     const { scopeId } = useScopeId()
     const { themeClasses } = provideTheme(props)
@@ -108,6 +109,16 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
     const timerRef = ref<VProgressLinear>()
     const isHovering = shallowRef(false)
     const startY = shallowRef(0)
+    const mainStyles = ref()
+    const hasLayout = inject(VuetifyLayoutKey, undefined)
+
+    useToggleScope(() => !!hasLayout, () => {
+      const layout = useLayout()
+
+      watchEffect(() => {
+        mainStyles.value = layout.mainStyles.value
+      })
+    })
 
     watch(isActive, startTimeout)
     watch(() => props.timeout, startTimeout)