ENG-7583: check against base component for style

[adhami3310]

No description provided.

[linear]

ENG-7583 passing component as css prop causes frontend error

[greptile-apps]

Greptile Summary

This PR adds defensive validation to prevent Reflex BaseComponent instances from being used as CSS style values. The change modifies the convert_item() function in reflex/style.py to include BaseComponent in the existing isinstance check that already prevented EventHandler objects from being used as style values.

The modification imports BaseComponent from reflex.components.component and extends the validation logic to catch when developers accidentally pass component objects as CSS property values. When this occurs, the function now raises a ReflexError with a clear message indicating that components cannot be used as style values and suggesting the use of Var or literal values instead.

This change integrates seamlessly with the existing style processing pipeline. The convert_item() function is a core utility that processes all style values during the conversion of style dictionaries to formatted CSS. By adding this validation at this level, the framework can catch the error early in the styling process, before the invalid component object propagates through the system and causes frontend rendering issues. The approach mirrors the existing pattern for EventHandler validation, maintaining consistency in the codebase's defensive programming practices.

Confidence score: 5/5

• This PR is safe to merge with minimal risk as it adds defensive validation without changing existing functionality
• Score reflects a simple, well-targeted fix that follows established patterns and improves error handling
• No files require special attention as the change is isolated and follows existing code patterns

_{1 file reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

[codspeed-hq]

CodSpeed Performance Report

Merging #5795 will not alter performance

_{Comparing khaleel/eng-7583-passing-component-as-css-prop-causes-frontend-error (cf4bed1) with main (367b24d)}

Summary

✅ 8 untouched