如何移除Material UI TextField默认的hover与active状态？

问题 #

我在做登录表单时使用了Material UI的TextField组件，想去掉它自带的hover和active状态，但试了下面的样式代码没效果：

'& .MuiInput-underline:hover:before':
{
    border: 'none !important'
},

'&:hover fieldset': {
      borderColor: 'grey',
    },

'& .MuiInput-underline:hover:before':
{
    border: 'none !important'
},

解决办法 #

根据TextField的不同样式类型，针对性写样式覆盖即可：

下划线型（variant="standard"） #

要去掉hover和激活状态的下划线，需覆盖MuiInput-underline的几个伪元素：

const useStyles = makeStyles({
  noStateTextField: {
    '& .MuiInput-underline:before': {
      borderBottom: 'none', // 移除默认下划线
    },
    '& .MuiInput-underline:hover:before': {
      borderBottom: 'none !important', // 移除hover时的下划线
    },
    '& .MuiInput-underline:after': {
      borderBottom: 'none !important' // 移除激活状态的下划线
    }
  }
});

// 组件使用示例
<TextField className={classes.noStateTextField} variant="standard" label="密码" type="password" />

轮廓型（variant="outlined"） #

如果用的是带边框的轮廓样式，就修改MuiOutlinedInput的边框样式：

const useStyles = makeStyles({
  noStateOutlinedTextField: {
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'grey', // 设置默认边框颜色
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: 'grey !important', // hover时保持默认色，不高亮
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: 'grey !important' // 激活时保持默认边框色
    }
  }
});

// 组件使用示例
<TextField className={classes.noStateOutlinedTextField} variant="outlined" label="密码" type="password" />

注意点 #

• 用!important确保自定义样式能覆盖Material UI的默认样式；
• 区分两种变体的选择器，下划线和轮廓的DOM结构不同；
• 若完全不需要边框，直接把borderColor改成transparent或设置border: none即可。

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