Closed henriqueholtz closed 1 year ago
Similar story here. Spent more time than I could admit on something apparently so simple, to no avail. In my case, I'm trying to modify the color of the outline of the MuiTextField or MuiOutlinedInput, in default, hover, focus, disabled, and filled state. The only example in the doc seems to be using the old API and is not working for the "5.6.4" version of the @mui/material.
I've found a bunch of answers for this problem on SO, but they are either not working (old versions, hacks) or partly working (usually customizing default styles only). It would be really nice to have more up-to-date examples of how we could customize the input's styles with the styleOverrides
and/or textFieldClasses
, outlinedInputClasses
.
I agree, this is insanely complicated to change the colors of borders when hover, focus... spend hours on this !
@darktasevski did you find a proper way to do it please ?
I have created a PR for it - #36805.
Duplicates
Latest version
Summary 💡
I spend some days trying change the css on hover of
TextField
/AutoComplete
usingcreateTheme
, and I don't see examples of this.In my case I need:
border-color
->fieldset
andcolor
->label
from aTextField
(variant:contained
) on hover to blueborder-color
/color
(red) on hover when this have an error.After searching and trying a lot, this works for me:
We need more examples like this to override styles on hover of specific components, and how made it correctly
Examples 🌈
My commit with this change on my project:
https://github.com/SharebookBR/sharebook-frontend-next/commit/a2954cc9e4e310f2072fdfcee020a406d543c052
Motivation 🔦
Improve docs and examples to customize hover (and others) in our theme .