Search code examples
reactjsmaterial-uitextfieldmousehovermouse-cursor

React Material UI TextField hover mouse icon

I want to change the default mouse cursor behavior of TextField of Material UI component when the TextField has variant="outlined". In such case the cursor is Text and I want to have it as a pointer. I tried to override it as the below but it did not work. I also changed MuiInputBase into TextField and still it did not work

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

and then later in my provider :

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

  • Just change root to input

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