CODEWITHSUNDEEP
reactjsmaterial-uitextfieldmousehovermouse-cursor
Sam
Sam

Reputation: 167

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>

Upvotes: 0

Views: 1734

Answers (1)

Viet
Viet

Reputation: 12787

Just change root to input

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

Upvotes: 2

Related Questions