From d785bd98da513f80a0750c20c1fa00fe7346a5ea Mon Sep 17 00:00:00 2001
From: Elijah Ahianyo <elijahahianyo@gmail.com>
Date: Tue, 24 Oct 2023 17:29:44 +0000
Subject: [PATCH] Radix Themes style notation fix (#2025)

---
 reflex/components/component.py         | 10 +++++++++-
 reflex/components/radix/themes/base.py |  3 +++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index 84a3551df..ee9c99ad4 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -461,6 +461,14 @@ class Component(Base, ABC):
             child.add_style(style)
         return self
 
+    def _get_style(self) -> dict:
+        """Get the style for the component.
+
+        Returns:
+            The dictionary of the component style as value and the style notation as key.
+        """
+        return {"sx": self.style}
+
     def render(self) -> Dict:
         """Render the component.
 
@@ -472,9 +480,9 @@ class Component(Base, ABC):
             tag.add_props(
                 **self.event_triggers,
                 key=self.key,
-                sx=self.style,
                 id=self.id,
                 class_name=self.class_name,
+                **self._get_style(),
                 **self.custom_attrs,
             ).set(
                 children=[child.render() for child in self.children],
diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py
index 07595fe19..d6b1b2085 100644
--- a/reflex/components/radix/themes/base.py
+++ b/reflex/components/radix/themes/base.py
@@ -65,6 +65,9 @@ class RadixThemesComponent(Component):
             (45, "RadixThemesColorModeProvider"): RadixThemesColorModeProvider.create(),
         }
 
+    def _get_style(self) -> dict:
+        return {"style": self.style}
+
 
 class Theme(RadixThemesComponent):
     """A theme provider for radix components.