From 196333f2c041ab749696d12a7350fae66a0da3a9 Mon Sep 17 00:00:00 2001 From: Khaleel Al-Adhami Date: Tue, 16 Sep 2025 11:53:30 -0700 Subject: [PATCH 1/2] ENG-7583: check against base component for style --- reflex/style.py | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/reflex/style.py b/reflex/style.py index 5be7473d762..6dc43fcd504 100644 --- a/reflex/style.py +++ b/reflex/style.py @@ -120,9 +120,11 @@ def convert_item( Raises: ReflexError: If an EventHandler is used as a style value """ - if isinstance(style_item, EventHandler): + from reflex.components.component import BaseComponent + + if isinstance(style_item, (EventHandler, BaseComponent)): msg = ( - "EventHandlers cannot be used as style values. " + f"{type(style_item)} cannot be used as style values. " "Please use a Var or a literal value." ) raise ReflexError(msg) From cf4bed17eca78dbd1bff6cc77e639a7be5df1838 Mon Sep 17 00:00:00 2001 From: Khaleel Al-Adhami Date: Tue, 16 Sep 2025 12:06:51 -0700 Subject: [PATCH 2/2] add tests --- tests/units/test_style.py | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/tests/units/test_style.py b/tests/units/test_style.py index de479c2b987..b3a9869d215 100644 --- a/tests/units/test_style.py +++ b/tests/units/test_style.py @@ -8,6 +8,7 @@ from reflex import style from reflex.components.component import evaluate_style_namespaces from reflex.style import Style +from reflex.utils.exceptions import ReflexError from reflex.vars import VarData from reflex.vars.base import LiteralVar, Var @@ -552,3 +553,31 @@ def test_style_update_with_var_data(): s3 = s1 | s2 assert s3._var_data is not None assert "_varData" not in s3 + + +def test_component_as_css_value_raises_error(): + """Test that passing a component as a CSS prop value raises ReflexError.""" + with pytest.raises(ReflexError, match="cannot be used as style values"): + rx.el.button( + "Import", + class_name="px-3 py-2 text-sm font-medium text-gray-600", + left_icon=rx.icon(tag="cloud_upload", class_name="w-4 h-4"), + ) + + # Test other CSS props that might receive components + with pytest.raises(ReflexError, match="cannot be used as style values"): + rx.el.div( + right_icon=rx.icon(tag="settings"), + ) + + # Test components passed to style dict + with pytest.raises(ReflexError, match="cannot be used as style values"): + rx.el.div( + style={"background": rx.icon(tag="star")}, + ) + + # Test nested style with component + with pytest.raises(ReflexError, match="cannot be used as style values"): + rx.el.div( + style={"_hover": {"content": rx.text("hover")}}, + )