Error while setting Component style to a Python Dict

[pcgeek86]

Describe the bug

When I try to apply several styles (ie. border-color and border-width) to a component, I cannot set it by using a Python Dict.

To Reproduce

class AddItemState(RootState):
    style = {
        'border-color': 'pink'
    }

@rx.page("/add")
def addItem():
    return rx.container(
        rx.button('Add Item', style=AddItemState.style,)
    )

Expected behavior

Assigning a Python Dict to the style property of a Reflex Component should properly assign the corresponding CSS styles.

Screenshots

Specifics (please complete the following information):

• Python Version: 3.11
• Reflex Version: 0.2.3
• OS: Ubuntu Studio 22.04 LTS
• Browser (Optional): Chromium

Originally posted in Discord, and was asked to post bug here by Lendemor.

[l-melon]

if you want setting component style to a python dict, you need assign to props this should work for you

class AddItemState(RootState):
    style = {
        'border-color': 'pink'
    }

@rx.page("/add")
def addItem():
    return rx.container(
        rx.button('Add Item', props=AddItemState.style,)
    )

[masenf]

The original code throws

Traceback (most recent call last):
  File "/Users/masenf/code/reflex-dev/reflex/reflex/app.py", line 458, in _generate_component
    return component if isinstance(component, Component) else component()
                                                              ^^^^^^^^^^^
  File "/Users/masenf/code/reflex-dev/repro-local-package/repro_local_package/repro_local_package.py", line 29, in addItem
    rx.button('Add Item', style=AddItemState.style,)
  File "/Users/masenf/code/reflex-dev/reflex/reflex/components/radix/themes/base.py", line 110, in create
    component = super().create(*children, **props)
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/masenf/code/reflex-dev/reflex/reflex/components/component.py", line 783, in create
    return cls(children=children, **props)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/masenf/code/reflex-dev/reflex/reflex/components/component.py", line 456, in __init__
    {
TypeError: 'BaseVar' object is not a mapping

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
  File "/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/multiprocessing/process.py", line 314, in _bootstrap
    self.run()
  File "/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/multiprocessing/process.py", line 108, in run
    self._target(*self._args, **self._kwargs)
  File "/Users/masenf/code/reflex-dev/VENV-dev/lib/python3.11/site-packages/uvicorn/_subprocess.py", line 76, in subprocess_started
    target(sockets=sockets)
  File "/Users/masenf/code/reflex-dev/VENV-dev/lib/python3.11/site-packages/uvicorn/server.py", line 60, in run
    return asyncio.run(self.serve(sockets=sockets))
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/asyncio/runners.py", line 190, in run
    return runner.run(main)
           ^^^^^^^^^^^^^^^^
  File "/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/asyncio/runners.py", line 118, in run
    return self._loop.run_until_complete(task)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/asyncio/base_events.py", line 653, in run_until_complete
    return future.result()
           ^^^^^^^^^^^^^^^
  File "/Users/masenf/code/reflex-dev/VENV-dev/lib/python3.11/site-packages/uvicorn/server.py", line 67, in serve
    config.load()
  File "/Users/masenf/code/reflex-dev/VENV-dev/lib/python3.11/site-packages/uvicorn/config.py", line 477, in load
    self.loaded_app = import_from_string(self.app)
                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/masenf/code/reflex-dev/VENV-dev/lib/python3.11/site-packages/uvicorn/importer.py", line 21, in import_from_string
    module = importlib.import_module(module_str)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/importlib/__init__.py", line 126, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "<frozen importlib._bootstrap>", line 1204, in _gcd_import
  File "<frozen importlib._bootstrap>", line 1176, in _find_and_load
  File "<frozen importlib._bootstrap>", line 1147, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 690, in _load_unlocked
  File "<frozen importlib._bootstrap_external>", line 940, in exec_module
  File "<frozen importlib._bootstrap>", line 241, in _call_with_frames_removed
  File "/Users/masenf/code/reflex-dev/reflex/reflex/app_module_for_backend.py", line 19, in <module>
    app._apply_decorated_pages()
  File "/Users/masenf/code/reflex-dev/reflex/reflex/app.py", line 799, in _apply_decorated_pages
    self.add_page(render, **kwargs)
  File "/Users/masenf/code/reflex-dev/reflex/reflex/app.py", line 536, in add_page
    component = self._generate_component(component)
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/masenf/code/reflex-dev/reflex/reflex/app.py", line 464, in _generate_component
    raise VarOperationTypeError(
reflex.utils.exceptions.VarOperationTypeError: You may be trying to use an invalid Python function on a state var. When referencing a var inside your render code, only limited var operations are supported. See the var operation docs here: https://reflex.dev/docs/vars/var-operations/

The suggested code, using props=AddItemState.style does not seem to work on reflex-0.5.3.

This is still an issue.

[adhami3310]

the following works:

import reflex as rx

class AddItemState(rx.State):
    style = {"border-color": "pink", "border-width": "2px", "border-style": "solid"}

@rx.page("/add")
def addItem():
    return rx.container(rx.button("Add Item", style={"&": AddItemState.style}))

app = rx.App()