Material-ui在鼠标悬停在TextField上时显示指针光标。

Question

Material-ui/ReactJS新手问题。我想在悬停在Material-ui文本字段上时显示指针光标，但是很难做到。它默认使用“cursor：text”。我已成功地更改了悬停时的文本字段背景颜色，但添加“cursor：pointer！important”没有效果。我尝试过使用className、class、style（内联），但我确定我做错了什么。Material-ui有一个演示，说明如何在悬停和聚焦时更改文本字段样式，在[https://codesandbox.io/s/p7uwn?file=/demo.js][1]中我还尝试将光标更改为指针，但仍然没有成功。非常感谢您的任何帮助。

import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '@material-ui/core';

const StyledTextField = styled(TextField)`
  label.Mui-focused {
    color: green;
  }
  .MuiOutlinedInput-root {
    fieldset {
      border-color: red;
    }
    &:hover fieldset {
      border-color: yellow;
      cursor: pointer !important;
    }
    &.Mui-focused fieldset {
      border-color: green;
    }
  }
`;

export default function GlobalClassName() {
  return (
    <NoSsr>
      <StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
    </NoSsr>
  );
}


 

- sybercoda

Answer 1

使用

<TextField sx={{ cursor: 'pointer' }} />

没有对我起作用，相反，我需要将其指定为

<TextField sx={{ input: { cursor: 'pointer' } }}

这确实影响了所需的更改。

- Jake Hall

Answer 2

或者在其CSS中直接将cursor:pointer输入，可以内联地使用<Component style={{cursor: 'pointer'}}>或<Component sx={{cursor: 'pointer'}}> ，也可以在其样式化组件的CSS中添加。这将自动更改你的鼠标悬停操作，并且此处的顶部答案过于复杂。只需将cursor: 'pointer'添加到组件的CSS中即可。

- skirdshateskirdy

Answer 3

快速检查浏览器可得我们需要定位的CSS组件是

.MuiOutlinedInput-input

只需为其添加

cursor: pointer;

属性即可解决问题。

以下是代码:

import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '@material-ui/core';

const StyledTextField = styled(TextField)`
  label.Mui-focused {
    color: green;
  }
  .MuiOutlinedInput-input {
    cursor: pointer;
  }
  .MuiOutlinedInput-root {
    fieldset {
      border-color: red;
    }
    &:hover fieldset {
      border-color: blue;
      cursor: pointer;
    }
    &.Mui-focused fieldset {
      border-color: green;
    }
  }
`;

export default function GlobalClassName() {
  return (
    <NoSsr>
      <StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
    </NoSsr>
  );
}

- Prathmesh Srivastava

---

谢谢。但是将cursor:pointer应用于该类实际上会一直应用cursor:pointer，而不仅仅在悬停时。理想情况下，我只想在悬停时应用cursor:pointer。 - sybercoda

Hover和focused是两种不同的状态。将cursor:pointer应用于“MuiOutlinedInput-input”将在悬停和聚焦状态下都显示指针。我只想在悬停状态下显示指针。 - sybercoda

添加:hover和:focus选择器并为它们设置光标属性将解决问题。.MuiOutlinedInput-input:hover { cursor: pointer; } .MuiOutlinedInput-input:focus { cursor: auto; } - Prathmesh Srivastava