[Docs] Include examples of the theme customization with hover

[henriqueholtz]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

I spend some days trying change the css on hover of TextField / AutoComplete using createTheme, and I don't see examples of this.

In my case I need:

• Change the border-color -> fieldset and color -> label from a TextField (variant: contained ) on hover to blue
• Keep default border-color/color (red) on hover when this have an error.

After searching and trying a lot, this works for me:

[...]
         MuiTextField: {
            styleOverrides: {
                root: {
                    '&:hover': {
                        '& label.MuiInputLabel-shrink:not(.Mui-error)': {
                            /* label of TextField:hover when it's shrink and not error */
                            color: borderColorHover
                        },
                        '& div:not(.Mui-error) > fieldset': {
                            /* fieldset of TextField:hover when it's not error */
                            borderColor: borderColorHover
                        }
                    }
                }
            }
        }
[...]

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 .

[darktasevski]

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.

[pixelize]

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 ?

[ZeeshanTamboli]

I have created a PR for it - #36805.