如何实现鼠标悬停Material-ui TextField时显示pointer指针光标

问题原因 #

你将cursor: pointer规则绑定到了fieldset元素上，该元素仅作为Outlined变体的边框装饰层，不负责响应输入区域的鼠标交互。默认的cursor: text样式是挂载在.MuiOutlinedInput-root根节点以及内部原生input元素上的，所以你的规则无法覆盖生效。

解决方案 #

调整样式规则的挂载位置，直接给.MuiOutlinedInput-root根节点设置对应状态的cursor，同时覆盖内部input的默认cursor即可，修改后的可用代码如下：

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 {
    /* 若需要仅悬停时显示pointer，可把下面这条cursor规则放到:hover块内 */
    cursor: pointer;
    &:hover {
      cursor: pointer !important;
      fieldset {
        border-color: yellow;
      }
    }
    fieldset {
      border-color: red;
    }
    &.Mui-focused fieldset {
      border-color: green;
    }
    /* 覆盖内部原生input的默认cursor:text样式 */
    input {
      cursor: pointer !important;
    }
  }
`;

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

内容的提问来源于stack exchange，提问作者sybercoda