How to style TextField.Root and add an new size

[xHenike]

I tried to style TextField.Root via classname with Vanilla Extract, but it didn't work until i add !important, but that doesn't seem the solution for me. Is there a better workaround or another solution? And what is the best practice way to add a new size (custom size 4) to the TextField?

[MukundaKatta]

For TextField.Root, target the inner slot via [data-slot="input"] or the TextField.Input element directly — Radix Themes' own styles are scoped tightly, which is what forces the !important. For a new size-4, use CSS custom properties: .rt-TextFieldRoot[data-size="4"] { --text-field-height: 48px; --text-field-font-size: 18px } etc. The variables are the supported extension point; overriding the internal classes isn't.