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.