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

Question

Material-ui/ReactJS 新手问题。我试图将鼠标悬停在 Material-ui TextField 上时显示指针光标，但很难做到这一点。它默认使用“光标：文本”。我已经能够成功地更改悬停时的文本字段背景颜色，但添加“光标：指针！重要”没有任何好处。我尝试过使用 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>
  );
}


 

Answer 1

使用

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

不适合我，相反，我需要将其指定为

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

这确实影响了预期的改变。