Apply themes to drawer content (#2612)

reflex/components/radix/primitives/drawer.py

@@ -7,6 +7,7 @@ from types import SimpleNamespace
 from typing import Any, Dict, List, Literal, Optional, Union
 
 from reflex.components.radix.primitives.base import RadixPrimitiveComponent
+from reflex.components.radix.themes.base import Theme
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -142,6 +143,25 @@ class DrawerContent(DrawerComponent):
             EventTriggers.ON_INTERACT_OUTSIDE: lambda e0: [e0.target.value],
         }
 
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a Drawer Content.
+         We wrap the Drawer content in an `rx.theme` to make radix themes definitions available to
+         rendered div in the DOM. This is because Vaul Drawer injects the Drawer overlay content in a sibling
+         div to the root div rendered by radix which contains styling definitions. Wrapping in `rx.theme`
+         makes the styling available to the overlay.
+
+        Args:
+            *children: The list of children to use.
+            **props: Additional properties to apply to the drawer content.
+
+        Returns:
+                 The drawer content.
+        """
+        comp = super().create(*children, **props)
+
+        return Theme.create(comp)
+
 
 class DrawerOverlay(DrawerComponent):
     """A layer that covers the inert portion of the view when the dialog is open."""

reflex/components/radix/primitives/drawer.pyi

@@ -10,6 +10,7 @@ from reflex.style import Style
 from types import SimpleNamespace
 from typing import Any, Dict, List, Literal, Optional, Union
 from reflex.components.radix.primitives.base import RadixPrimitiveComponent
+from reflex.components.radix.themes.base import Theme
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -442,10 +443,14 @@ class DrawerContent(DrawerComponent):
         ] = None,
         **props
     ) -> "DrawerContent":
-        """Create the component.
+        """Create a Drawer Content.
+         We wrap the Drawer content in an `rx.theme` to make radix themes definitions available to
+         rendered div in the DOM. This is because Vaul Drawer injects the Drawer overlay content in a sibling
+         div to the root div rendered by radix which contains styling definitions. Wrapping in `rx.theme`
+         makes the styling available to the overlay.
 
         Args:
-            *children: The children of the component.
+            *children: The list of children to use.
             as_child: Change the default rendered element for the one passed as a child.
             style: The style of the component.
             key: A unique key for the component.
@@ -453,13 +458,10 @@ class DrawerContent(DrawerComponent):
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: Additional properties to apply to the drawer content.
 
         Returns:
-            The component.
-
-        Raises:
-            TypeError: If an invalid child is passed.
+                 The drawer content.
         """
         ...