MUI TextField hover颜色未生效，仅修改sx编译后恢复正常

问题重现 #

用户编写的Material UI TextField代码如下：

<TextField
  shrink="false"
  id="outlined-basic"
  variant="standard"

  sx = {{ 
      minWidth:"28%",
      minHeight:"50px",
      maxWidth:"28%",
      maxHeight:"50px",

      marginTop:"2vh",
      
      '& .MuiInput-underline:before': {
        borderBottomColor: 'tomato',
      },
      '& .MuiInput-underline:hover:before': {
        borderBottomColor: 'blue', 
      },
      '& .MuiInput-underline:after': {
        borderBottomColor: 'green',
      },
  }}>
</TextField>

运行代码后出现异常：hover下划线时颜色仍为默认的rgba(0, 0, 0, 0.87)；仅当修改sx内的属性（如minWidth）并保存编译项目后，hover时才会显示蓝色；修改variant属性则无此效果。

原因分析 #

• 核心是热更新缓存导致的样式优先级冲突。初始编译时，Material UI的默认hover样式优先级高于你在sx中定义的规则；而修改sx内属性触发热更新时，新生成的样式会被注入到样式表更靠后的位置，优先级超过默认样式，所以蓝色能生效。
• 修改variant不生效，是因为它属于组件核心属性，热更新时仅替换组件基础结构，没有重新计算sx样式的注入顺序，缓存的默认hover样式依然占据更高优先级。

解决方法 #

• 方法一：强制提升样式优先级
  在hover样式规则中添加!important，强制覆盖默认样式：

  '& .MuiInput-underline:hover:before': {
    borderBottomColor: 'blue !important', 
  },
  

• 方法二：使用styled API替代sx
  用Material UI的styled创建自定义TextField组件，这种方式生成的样式优先级更稳定，不受热更新缓存影响：

  import { styled } from '@mui/material/styles';
  import TextField from '@mui/material/TextField';
  
  const CustomTextField = styled(TextField)(({ theme }) => ({
    minWidth: "28%",
    minHeight: "50px",
    maxWidth: "28%",
    maxHeight: "50px",
    marginTop: "2vh",
    '& .MuiInput-underline:before': {
      borderBottomColor: 'tomato',
    },
    '& .MuiInput-underline:hover:before': {
      borderBottomColor: 'blue', 
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'green',
    },
  }));
  
  // 组件使用
  <CustomTextField shrink="false" id="outlined-basic" variant="standard" />
  

• 方法三：手动清除缓存
  每次修改样式后按下Ctrl+F5强制刷新页面，让浏览器重新加载所有样式文件，避免缓存的默认样式干扰。

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