如何将Material UI outlined类型TextField hover鼠标指针改为pointer

问题根因 #

1. 伪类选择器语法错误：原代码中&:hover:多了一个多余的结尾冒号，导致样式匹配失效
2. 配置字段不匹配：MUI v5及以上版本，主题覆盖的根配置字段已从overrides改为components
3. 组件选择不精准：如果仅需要对outlined类型的TextField生效，应该匹配MuiOutlinedInput组件，而非通用的MuiInputBase，避免影响其他输入类组件

解决方案 #

方案1：全局主题覆盖（仅针对outlined类型TextField生效）

如果你使用的是 MUI v5及以上版本，修改主题配置如下：

const myTheme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '&:hover': {
            cursor: "pointer"
          }
        }
      }
    }
  }
});

如果你使用的是 MUI v4版本，配置如下：

const myTheme = createTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        '&:hover': {
          cursor: "pointer"
        }
      }
    }
  }
});

后续ThemeProvider的使用逻辑保持和你原有代码一致即可生效。

方案2：局部修改单个TextField

如果不需要全局生效，仅需要修改个别TextField的样式，可以直接通过InputProps配置：

<TextField
  variant="outlined"
  InputProps={{
    sx: {
      '&:hover': {
        cursor: 'pointer'
      }
    }
  }}
/>

额外说明 #

如果需要让disabled状态的TextField不生效这个样式，可以调整选择器为&:hover:not(:disabled)即可。

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