add in rx.el.style (#3511)

reflex/components/el/__init__.pyi

@@ -127,11 +127,13 @@ from .elements.metadata import head as head
 from .elements.metadata import link as link
 from .elements.metadata import meta as meta
 from .elements.metadata import title as title
+from .elements.metadata import style as style
 from .elements.metadata import Base as Base
 from .elements.metadata import Head as Head
 from .elements.metadata import Link as Link
 from .elements.metadata import Meta as Meta
 from .elements.metadata import Title as Title
+from .elements.metadata import Style as Style
 from .elements.other import details as details
 from .elements.other import dialog as dialog
 from .elements.other import summary as summary

reflex/components/el/elements/__init__.py

@@ -76,6 +76,7 @@ _MAPPING = {
         "link",
         "meta",
         "title",
+        "style",
     ],
     "other": ["details", "dialog", "summary", "slot", "template", "math", "html"],
     "scripts": ["canvas", "noscript", "script"],

reflex/components/el/elements/__init__.pyi

@@ -125,11 +125,13 @@ from .metadata import head as head
 from .metadata import link as link
 from .metadata import meta as meta
 from .metadata import title as title
+from .metadata import style as style
 from .metadata import Base as Base
 from .metadata import Head as Head
 from .metadata import Link as Link
 from .metadata import Meta as Meta
 from .metadata import Title as Title
+from .metadata import Style as Style
 from .other import details as details
 from .other import dialog as dialog
 from .other import summary as summary
@@ -296,7 +298,7 @@ _MAPPING = {
         "stop",
         "path",
     ],
-    "metadata": ["base", "head", "link", "meta", "title"],
+    "metadata": ["base", "head", "link", "meta", "title", "style"],
     "other": ["details", "dialog", "summary", "slot", "template", "math", "html"],
     "scripts": ["canvas", "noscript", "script"],
     "sectioning": [

reflex/components/el/elements/metadata.py

@@ -56,8 +56,18 @@ class Title(Element):  # noqa: E742
     tag = "title"
 
 
+# Had to be named with an underscore so it doesnt conflict with reflex.style Style in pyi
+class StyleEl(Element):  # noqa: E742
+    """Display the style element."""
+
+    tag = "style"
+
+    media: Var[Union[str, int, bool]]
+
+
 base = Base.create
 head = Head.create
 link = Link.create
 meta = Meta.create
 title = Title.create
+style = StyleEl.create

reflex/components/el/elements/metadata.pyi

@@ -651,8 +651,88 @@ class Title(Element):
         """
         ...
 
+class StyleEl(Element):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        media: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "StyleEl":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            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.
+
+        Returns:
+            The component.
+        """
+        ...
+
 base = Base.create
 head = Head.create
 link = Link.create
 meta = Meta.create
 title = Title.create
+style = StyleEl.create