Material ui 如何访问物料界面'；悬停元素/颜色上的s文本字段下边框

我正在尝试自定义材质UI的textfield组件

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

---

您好，这条绿线上的黑线出现是因为您正在覆盖

。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"
    }
  }

黑线消失了。代码沙盒示例

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