Material UI v1版本TextField下划线Hover颜色设置无效，求解决方案

数据老陈

2026-5-28

解决Material UI 1.x中TextField hover状态下划线颜色失效的问题

嘿，我来帮你搞定这个困扰！在Material UI 1.x版本里，组件的样式类名规范和结构都做了调整，之前针对旧版本写的伪元素选择器自然就不生效了。别担心，我给你两个常用的可行方案：

方案一：使用`withStyles`高阶组件定制

这种方式适合类组件，也能轻松复用定制后的TextField：

import { TextField, withStyles } from '@material-ui/core';

// 定义自定义样式
const StyledTextField = withStyles({
  root: {
    // 定位到Input的下划线容器
    '& .MuiInput-underline': {
      // 针对hover且非禁用状态的下划线
      '&:hover:not(.Mui-disabled):before': {
        borderBottomColor: 'green', // 替换成你想要的hover颜色
      },
      // 额外补充：如果需要修改focus状态的下划线颜色
      '&:after': {
        borderBottomColor: 'darkgreen',
      }
    }
  }
})(TextField);

// 直接使用定制后的组件
function App() {
  return <StyledTextField label="自定义下划线颜色" />;
}

方案二：使用`makeStyles`钩子（函数组件推荐）

如果你用的是函数组件，makeStyles会更灵活：

import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles({
  customTextField: {
    '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
      borderBottomColor: 'green',
    }
  }
});

function MyComponent() {
  const classes = useStyles();
  return <TextField className={classes.customTextField} label="测试输入框" />;
}