reactjs - React Material UI TextField 鼠标悬停图标

Question

当 TextField 具有 variant="outlined" 时，我想更改 Material UI 组件的 TextField 的默认鼠标光标行为。在这种情况下，光标是文本，我想将它作为指针。我试图像下面那样覆盖它，但它没有用。我还将 MuiInputBase 更改为 TextField 仍然无法正常工作

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

然后在我的提供者中：

<ThemeProvider theme={myTheme}>
   <TextField variant="outlined"/>
</ThemeProvider>

标签： reactjsmaterial-uitextfieldmousehovermouse-cursor

Answer 1

只需更改root为input

MuiInputBase: {
  input: {
    "&:hover": {
      cursor: "pointer",
    },
  },
},