diff --git a/reflex/style.py b/reflex/style.py
index f5e424fe2..192835ca3 100644
--- a/reflex/style.py
+++ b/reflex/style.py
@@ -303,8 +303,16 @@ class Style(dict):
         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]
+        other_var_data = None
+        if not isinstance(other, Style):
+            other_dict, other_var_data = convert(other)
+        else:
+            other_dict, other_var_data = other, other._var_data
+
+        new_style = Style(super().__or__(other_dict))
+        if self._var_data or other_var_data:
+            new_style._var_data = VarData.merge(self._var_data, other_var_data)
+        return new_style
 
 
 def _format_emotion_style_pseudo_selector(key: str) -> str:
diff --git a/tests/units/test_style.py b/tests/units/test_style.py
index 6ab00d561..e8ff5bd01 100644
--- a/tests/units/test_style.py
+++ b/tests/units/test_style.py
@@ -541,3 +541,7 @@ def test_style_update_with_var_data():
     assert s2._var_data is not None
     assert "const red = true" in s2._var_data.hooks
     assert "const blue = true" in s2._var_data.hooks
+
+    s3 = s1 | s2
+    assert s3._var_data is not None
+    assert "_varData" not in s3