Material-ui: [TextField & Input] Remove black underline when hover

[HelloEdit]

Hello,

Can you remove the horrible black underline bar that appears when you mouse hover a TextField or Input, or add an animation to be less brutal ?
It's really horrible and it totally breaks the design...

Thanks,

[kgregory]

It is defined this way in the Material Design standards. This package adheres to the standards, if you want to deviate, you can do so in your application.

This particular behavior is defined in Input, so you can customize the hover behavior for the underline class for all Input field when you create your theme.

Something like:

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      // Name of the styleSheet
      underline: {
        '&:hover:not($disabled):before': {
          backgroundColor: theme.palette.input.bottomLine,
          height: 1,
        },
      },
    },
  },
});

I haven't tested this code, but you get the idea.

[oliviertassinari]

@kgregory's answer is great 👍 . By the way, let me know if you need write access to the repository, that can help in the process of answering/triangle/closing issues.

[kgregory]

@oliviertassinari that would be great. I would have closed this one for you.

[HelloEdit]

Thanks for your answer ! I did not know if it was a specification of the Material Design

[kgregory]

@HelloEdit The spec is a really nice resource, but it isn't perfect. There are some contradictory statements, some unclear definitions, but it offers the result of many decisions that you won't have to make, which is nice.

[HelloEdit]

Indeed, several specs contradict themselves and are not even respected by Google in its applications.
Afterwards, I think that some things are not justified (the black bar under the textfields 😊) and I think it's really to everyone's taste, and that's why it has remained extremely customizable and flexible.

[joegyoung]

How would I customize using createStyleSheet? I am trying to remove the underline from the App bar in the Material-ui v1.

[kgregory]

@joegyoung You'll have better luck asking this question on StackOverflow and providing some additional detail an example of what you're looking to accomplish.