如何实现MUI CustomTextField鼠标悬停时修改输入标签颜色？

架构老林

2026-7-8

解决MUI CustomTextField悬停时标签颜色切换问题

你不需要用onMouseOver/onMouseLeave事件手动控制标签颜色，这种方式容易和MUI内部事件逻辑冲突导致组件失效。直接通过CSS选择器关联输入框的hover状态来控制标签样式即可，更简洁也符合MUI的样式定制规范。

修改步骤：

移除InputLabelProps中依赖状态的getTextColor逻辑，改为默认白色并添加过渡效果，保证颜色切换平滑
在styled的样式规则中，添加根元素hover时对标签的颜色控制

完整代码示例：

import { TextField, alpha } from "@mui/material";
import { styled } from "@mui/material/styles";

const CustomTextField = styled((props) => (
  <TextField
    InputLabelProps={{
      sx: {
        color: "#FFFFFF",
        transition: "color 0.2s ease", // 和输入框过渡时长保持一致
      },
    }}
    InputProps={{ disableUnderline: true }}
    {...props}
  />
))(({ theme }) => ({
  // 根元素hover时控制标签颜色
  "&:hover .MuiInputLabel-root": {
    color: "#000000",
  },
  "& .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,
    },
  },
}));