Блог

Главная - Вопросы по программированию - Текстовое поле пользовательского интерфейса React Material при наведении курсора мыши

Текстовое поле пользовательского интерфейса React Material при наведении курсора мыши

#reactjs #material-ui #textfield #mousehover #mouse-cursor

Вопрос:

Я хочу изменить поведение курсора мыши по умолчанию в текстовом поле компонента пользовательского интерфейса материала, когда текстовое поле имеет вариант=»очерчено». В таком случае курсор-это текст, и я хочу, чтобы он был указателем. Я попытался переопределить его, как показано ниже, но это не сработало. Я также изменил MuiInputBase в текстовое поле, и все равно это не сработало

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

а потом позже в моем провайдере :

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

Ответ №1:

Просто измените root на input 

 MuiInputBase: {
  input: {
    "amp;:hover": {
      cursor: "pointer",
    },
  },
},

Комментарии:

1. Спасибо, Вьет. Не могли бы вы, пожалуйста, сообщить мне, как вы узнали, какой селектор следует выбрать? Я использовал инструменты разработки Google chrome, и при наведении на него я увидел, что запускаются MuiInputBase-root и многие другие классы. Спасибо

2. Вы можете найти свойство cursor и увидеть его в input

3. Когда я ищу, я в основном вижу курсор на MuiInputBase-root

Метки: