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

Question

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

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

这是当我将鼠标悬停在组件上时该组件的图片

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

并且黑线消失。这是一个codesandbox示例。