I am trying to implement a textarea in a interface where the input field needs to blend seamlessly with a custom-styled container. Currently, the Textarea component only supports outline and soft variants.
Even when attempting to override the styles via the style prop:
<Textarea
variant="soft" // or "outline"
style={{ background: "transparent", border: "none", boxShadow: "none" }}
/>
My temporary solution is to create a classname
.transparent-textarea,
.transparent-textarea textarea {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
and adding
<Textarea
variant="soft" // or "outline"
className="transparent-textarea"
/>