Recharts component props (strokeDasharray, tickFormatter) are routed to wrapperStyle and never reach the Recharts component

[masonse]

Describe the bug

Several Recharts component props are not passed through to the underlying Recharts component. They appear to land in the wrapper element's style attribute (per #4447, which intentionally enables CSS props via wrapperStyle) even when the prop is not a CSS property and Recharts expects it as a component prop.

Two concrete cases that broke for us in 0.9.3:

1. stroke_dasharray on rx.recharts.reference_line(...) does not produce a dashed reference line; the line renders solid.
2. tick_formatter=rx.Var.create("(v) => new Date(v*1000).toLocaleDateString()") on rx.recharts.x_axis(...) does not format the ticks; the axis shows raw values instead of formatted dates.

To Reproduce

import reflex as rx

class State(rx.State):
    data: list[dict] = [
        {"t": 1700000000, "v": 5},
        {"t": 1700086400, "v": 8},
        {"t": 1700172800, "v": 3},
    ]

def chart() -> rx.Component:
    return rx.recharts.line_chart(
        rx.recharts.line(data_key="v", stroke="#8884d8"),
        rx.recharts.x_axis(
            data_key="t",
            tick_formatter=rx.Var.create("(v) => new Date(v*1000).toLocaleDateString()"),
        ),
        rx.recharts.y_axis(),
        rx.recharts.reference_line(
            y=6,
            stroke="red",
            stroke_dasharray="8 8",  # never reaches Recharts
        ),
        data=State.data,
        width="100%",
        height=300,
    )

app = rx.App()
app.add_page(chart)

Inspecting the rendered DOM shows strokeDasharray: 8 8 on the wrapper div style attribute rather than as a prop on the Recharts <ReferenceLine> SVG element. Same for tickFormatter.

Expected behavior

Component props that are not CSS properties should be forwarded directly to the Recharts component as JS props, not coerced into wrapper style. CSS-only routing (per #4447) should be limited to actual CSS properties.

Workaround

Use custom_attrs to bypass Reflex's prop-mapping layer:

rx.recharts.reference_line(
    y=6,
    stroke="red",
    custom_attrs={"strokeDasharray": "8 8"},
)
rx.recharts.x_axis(
    data_key="t",
    custom_attrs={"tickFormatter": "(v) => new Date(v*1000).toLocaleDateString()"},
)

Both work as expected. This suggests the prop-routing layer is treating these as CSS props but custom_attrs correctly attaches them as component props.

Specifications

• Reflex version: 0.9.3
• Python version: 3.12
• OS: macOS
• Related closed PR: enable css props via wrapperStyle for recharts components #4447 (enable css props via wrapperStyle for recharts)

Additional context

The custom_attrs workaround is the de-facto pattern for any Recharts prop that Reflex 0.9.x doesn't have first-class support for. It would be a usability improvement to either auto-detect non-CSS props or document which Recharts props need custom_attrs.

[linear-code]

ENG-9616