`rx.text_area` doesnt apply some css props correctly

[ElijahAhianyo]

This is a similar issue with rx.input(rx.text_field) where Radix wraps the component in a root div in the DOM, so styles get applied to the the wrapped div than the intended component (text_area in this case).

rx.text_area(
            "This sentense has a speling mistake.",
            rows="4",
            spellcheck=True,
            spelling_error_underline=True,
            padding="0.5rem",
            background_color="red"
        ),

Not sure what we can do about this, but Im creating this issue to track it

[kalyankotikalapudi]

Hello, Can you assign this bounty to me and give further instructions, After successful completion can you interview me

[Alek99]

Yes we will, ok just assigned it to you. We aren't giving further guidance/answering questions for the bounties but your welcome to give it a shot.

[dimritium]

hi @ElijahAhianyo, are you sure if this is a bug? To me it looks like only those styles are being applied to wrapped div element that are not supported by radix UI textarea component in this case: padding, background_color.

[kalyankotikalapudi]

Here, text_area does not support wrapping the inside elements separately in radix. But we might use reflex raw HTML element in this

[dimritium]

ah sorry, I also checked the Radix implementation for TextArea, it applies the style to the textarea parent div only.

so is this a bug in reflex implementation?

[bhaskar552]

rx.text_area(
    "This sentence has a spelling mistake.",
    rows="4",
    spellcheck=True,
    spelling_error_underline=True,
    style={
        "& textarea": {
            "padding": "0.5rem",
            "background_color": "red",
        }
    }
)

This solution uses the style prop and targets the textarea element directly within the Radix UI component. The & textarea selector should apply the styles to the textarea element itself, rather than the wrapper div.