material-ui - 如何访问 Material UI 文本字段底部边框悬停元素/颜色

Question

我正在尝试自定义 Material UI 的文本字段组件。

我可以在将鼠标移到该字段上之前修改底部边框颜色，并在我单击该字段后修改它的颜色。但是在这两个时刻之间，当我的鼠标刚好悬停在该字段上时，底部边框变黑了，我不知道如何更改该颜色。我试图通过使用不同的颜色来识别问题，但即使是悬停时的绿色也只是出现在黑线旁边。尝试通过开发人员工具识别它并没有帮助 - 似乎没有什么可以使悬停线变黑。怎么才能弄到这神秘的黑线/颜色呢？

Here's a picture of the component when I hover my mouse over it

const CreateStyles = makeStyles(() => ({
  root: {
    '& .MuiInput-underline:before': {
      borderBottom: '2px solid white',
    },
    '& .MuiInput-underline:after': {
      borderBottom: '2px solid yellow',
    },
    '& .MuiInput-underline:hover': {
      borderBottom: '2px solid green',
    },
  },
}));

Answer 1

这条绿线上的黑线出现是因为您正在覆盖 .MuiInput-underline:hover。尝试覆盖 .MuiInput-underline:hover:before ，例如:

root: {
    "& .MuiInput-underline:before": {
      borderBottom: "2px solid white"
    },
    "& .MuiInput-underline:after": {
      borderBottom: "2px solid yellow"
    },
    "& .MuiInput-underline:hover:before": {
      borderBottom: "2px solid green"
    }
  }

黑线消失了。 Here一个 codesandbox 示例。