Css MUI Textfield悬停时输入标签 colored颜色

我目前有一个CustomTextField样式的Mui Textfield，当鼠标悬停在上面时，它会改变输入的背景 colored颜色 和字体 colored颜色 .但是，我也想在悬停时更改标签的字体 colored颜色 .目前，输入背景在悬停时从黑色变为白色，而字体 colored颜色 则相反.我希望在悬停时标签 colored颜色 也从白色变为黑色.

我怎样才能做到这一点呢？我try 添加onMouseover和OnMouseLeave事件侦听器并手动设置标签 colored颜色 ，但添加onMouseover侦听器似乎完全 destruct 了Textfield.这是我的代码:

codesandbox.io/s/brave-dew-d472zl?file=/src/App.js个

const CustomTextField = styled((props) => (
    <TextField
      InputLabelProps={{
        // getTextColor() checks a state variable called hoveredControl which just stores
        // the id of the currently hovered component. If the hoveredControl is this input,
        // set the text color to black otherwise, set to white.
        sx: { color: getTextColor(props.id) },
      }}
      InputProps={{ disableUnderline: true }}
      {...props}
    />
  ))(({ theme }) => ({
    "& .MuiFilledInput-root": {
      overflow: "hidden",
      borderRadius: 4,
      backgroundColor: "#232323",
      color: "#FFFFFF",
      border: "1px solid",
      borderColor: "#2D3843",
      transition: theme.transitions.create(["border-color", "background-color", "box-shadow"]),
      "&:hover": {
        backgroundColor: "#bdbdbd",
        color: "#000000",
      },
      "&.Mui-focused": {
        color: "#000000",
        backgroundColor: "#bdbdbd",
        boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
        borderColor: theme.palette.primary.main,
      },
    },
}));