_hover styling does not work for rx.link

[jod35]

Hover style does not work only for the rx.link component I’m working on a Reflex project where I’ve been implementing custom styles and using CSS files to style certain components. However, I’ve noticed that the _hover style is not being applied, whether I use it inline or globally. As a temporary workaround, I’ve resorted to styling the components that previously relied on this feature manually.

headerActions_a = {
 ... #rest of the styles
    "_hover": {
        "background_color": ColorEnum.primary.value,
        "color": ColorEnum.t_color.value,
    },
}

to this

    "a.rt-Link.css-u82ugq-Component:hover": {
        "background_color": ColorEnum.primary.value,
        "color": ColorEnum.t_color.value,
    },

To Reproduce Steps to reproduce the behavior:

• Upgrading a project from reflex v 0.5.9 to v 0.5.10

Expected behavior The link should change styling while hovered over.

Screenshots

This is how the button should look when hovered.

This is what it looks like

Specifics (please complete the following information):

• Python Version: 3.12.0
• Reflex Version: 0,5.10
• OS: Ubuntu 22.04
• Browser (Optional): Chrome

Additional context Styles worked well before the Reflex upgrade

[jod35]

This is the component where the button lies and the styling that leads to the issue.

def dream_section() -> rx.Component:
    return rx.box(
        rx.box(
            rx.heading(
                "Turn Dreams Into Reality Take the First Step with Funding",
                style=dream_section_styles.dreamsContent_h2,
            ),
            rx.link(
                "get funding ",
                rc.span(
                    rx.icon(
                        "arrow-right", style=dream_section_styles.dreamsContent_icon
                    )
                ),
                href="/signup?role=Tenderpreneur",
                style=dream_section_styles.dreamsContent_a,
            ),
            style=dream_section_styles.dreamsContent,
        ),
        id="dream_section",
        style=dream_section_styles.dreams,
    )

The styles for the link

large_btn = {
    "padding": "16px 32px 16px 32px",
    "border_radius": "4px",
    "background_color": ColorEnum.primary.value,
    "color": ColorEnum.white.value,
    "margin_top": "18px",
    "width": "fit-content",
    "font_family": ColorEnum.heading_font.value,
    "font_size": "20px",
    "font_weight": "600",
    "line_height": "25px",
    "letter_spacing": "0.1em",
    "text_align": "center",
    "text_decoration": "none",
    "text_transform": "uppercase",
    "cursor": "pointer",
    ":hover": {
        "background_color": ColorEnum.tint2.value,
        "color": ColorEnum.t_color.value,
    },
}