Material-ui: Unable to override Input's hover underline rule

[fterh]

I was looking for a way to disable or modify the black underline that happens when you hover over a Material input element.

I found this answer (https://github.com/mui-org/material-ui/issues/7753) and I tried.

What happened instead was that a new underline "element" was rendered in addition to the original black one.

See: https://codesandbox.io/s/wz7z4pqqxw

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

import React from "react";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        "&&&&:hover:before": {
          borderBottom: "1px solid rgba(0, 0, 0, 0.42)"
        }
      }
    }
  }
});

function OverridesCss() {
  return (
    <MuiThemeProvider theme={theme}>
      <Input disabled={false} value="Hello world" />
    </MuiThemeProvider>
  );
}

export default OverridesCss;

https://codesandbox.io/s/4zx6w005z7

[fterh]

@oliviertassinari Thank you! How did that work, though? What do the 4 ampersands do?

[oliviertassinari]

What do the 4 ampersands do?

@fterh You can see the generated CSS injected in the DOM. & is a reference to the class name. It's increasing specificity to override the three not():
https://github.com/mui-org/material-ui/blob/4bf97b52113f104174f0cd850bfc2a8fc73c2d99/packages/material-ui/src/Input/Input.js#L120