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

[Alek99]

Discussed in https://github.com/orgs/reflex-dev/discussions/3831

^{Originally posted by egonsung August 26, 2024}
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.