如何为MUI 5版本TextField组件的禁用元素添加悬停样式

问题核心在于禁用状态的元素默认带有pointer-events: none，导致hover事件无法触发；同时WebkitTextFillColor的优先级高于普通color属性，直接设置color不会生效。

修改后的代码如下：

import * as React from "react";

import TextField from "@mui/material/TextField";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export default function BasicDatePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            disabled
            sx={{
              // 给禁用的TextField根元素开启指针事件，让hover能触发
              '&.MuiTextField-root.Mui-disabled': {
                pointerEvents: 'auto',
              },
              '& .MuiInputBase-input.Mui-disabled': {
                WebkitTextFillColor: 'pink',
              },
              // 悬停时修改WebkitTextFillColor而非color，保证优先级
              '&:hover .MuiInputBase-input.Mui-disabled': {
                WebkitTextFillColor: 'green',
              }
            }}
          />
        )}
      />
    </LocalizationProvider>
  );
}

关键调整说明： #

• 开启指针事件：给禁用状态的TextField根元素设置pointer-events: auto，让鼠标悬停事件能够被捕获。
• 调整颜色属性：hover时修改WebkitTextFillColor而非color，因为前者是专门用于覆盖输入框文字填充色的属性，优先级更高。

内容的提问来源于stack exchange，提问作者Happy1234