From 3bd2bea54d3c30e6d2a4f1613b8d0ce5070710e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Brand=C3=A9ho?= <thomas.brandeho@gmail.com>
Date: Tue, 28 Jan 2025 22:47:57 +0100
Subject: [PATCH] merging two style instance should give a style instance
 (#4706)

* merging two style instance should give a style instance

* fix ci

* carry _var_data
---
 reflex/style.py | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/reflex/style.py b/reflex/style.py
index 5142d01817..88513dce66 100644
--- a/reflex/style.py
+++ b/reflex/style.py
@@ -292,6 +292,18 @@ def __setitem__(self, key: str, value: Any):
             )
         super().__setitem__(key, value)
 
+    def __or__(self, other: Style | dict) -> Style:
+        """Combine two styles.
+
+        Args:
+            other: The other style to combine.
+
+        Returns:
+            The combined style.
+        """
+        _var_data = VarData.merge(self._var_data, getattr(other, "_var_data", None))
+        return Style(super().__or__(self, other), _var_data=_var_data)  # pyright: ignore [reportGeneralTypeIssues, reportCallIssue]
+
 
 def _format_emotion_style_pseudo_selector(key: str) -> str:
     """Format a pseudo selector for emotion CSS-in-JS.