How to override style on some containers that is generated from some components?

[egonsung]

Hey everyone, I've come across this on a few occasions. I will start with the more straightforward one:
I wanted to fill in the width of the input field and the code looks like this:
rx.flex( rx.text(_('License key:'), whiteSpace="nowrap"), rx.flex( rx.debounce_input( rx.input( placeholder=_("Paste your license key here"), width="100%", margin="1em", on_change=State_a1.handle_license_key), debounce_timeout=5000, width="100%", alignSelf="stretch" ), width="100%", alignSelf="stretch" ), flexDirection="row", alignItems="center", justify="center", width="100%" ),
When I look into the inspection, something with the class "rt-TextFieldRoot" is preventing it from filling in the width.

On other occasions, like rx.table, I wanted to implement position:sticky, but there are a few containers with overflow:scroll and overflow:hidden, which anything other than overflow: inherit messes up how position:sticky works.

What are some of the ways to override those generated divs in reflex components?

Thank you.

[picklelo]

@egonsung Yeah the base Radix input (our rx.input) is a bit hard to customize as it has some predefined styles. You can use any of the base HTML components in the rx.el namespace - so for example you can use rx.el.input here instead and it will be unstyled. The downside is that it may not hook into the themes by default.

See here for more: https://reflex.dev/docs/library/html/html/

[egonsung]

Thank you, I will be using this solution.