Reactjs 当鼠标悬停在材质UI中的日期字段上时，如何显示手形符号（光标指针）？

当我将鼠标悬停在“日期”类型的文本字段上时，我需要显示光标指针。我提供下面的沙盒链接。有人能帮我吗？多谢各位

沙盒链接：

代码：-

import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

 const useStyles = makeStyles((theme: Theme) =>
 createStyles({
container: {
  display: 'flex',
  flexWrap: 'wrap',
},
textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
  width: 200,
},
}),
);

export default function DatePickers() {
const classes = useStyles();

return (
<form className={classes.container} noValidate>
  <TextField
    id="date"
    label="Birthday"
    type="date"
    defaultValue="2017-05-24"
    className={classes.textField}
    InputLabelProps={{
      shrink: true,
    }}
  />
 </form>
 );
}

从“React”导入React；
从'@material ui/core/styles'导入{createStyles，makeStyles，Theme}；
从“@material ui/core/TextField”导入TextField；
const useStyles=makeStyles（（主题：主题）=>
创建样式({
容器：{
显示：“flex”，
flexWrap:“wrap”，
},
文本字段：{
边缘左侧：主题。间距（1），
边缘光：主题。间距（1），
宽度：200，
},
}),
);
导出默认函数DatePickers（）{
const classes=useStyles（）；
返回(
);
}

必须使用InputProps将道具传递给内部组件。您可以检查可用的类

---

视图。

必须使用InputProps将道具传递给内部组件。您可以检查可用的类

---

查看。

添加

悬停

此处：

`textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
  width: 200,
 '&:hover': {
    cursor: "pointer"
  }
},`

---

并且应该做这个把戏

在这里添加

悬停

：

`textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
  width: 200,
 '&:hover': {
    cursor: "pointer"
  }
},`

---

而且应该做到这一点

谢谢你，伙计。但当我将鼠标悬停在文本字段中的日期图标上时，它仍然没有显示手符号。还有什么方法可以达到这个目的吗？你是说“日期图标”吗。您的代码段不包含此项。无配偶。在上面的参考中，文本字段中使用了一个输入环境。但在这里，当我们在文本字段中使用type=“date”时，该图标会自动显示。嗯，我认为它是特定于浏览器的。。。在firefox中，右边没有图标，但在chrome中有。我想我做到了。你能检查一下相同的代码沙盒链接吗？谢谢，伙计。但当我将鼠标悬停在文本字段中的日期图标上时，它仍然没有显示手符号。还有什么方法可以达到这个目的吗？你是说“日期图标”吗。您的代码段不包含此项。无配偶。在上面的参考中，文本字段中使用了一个输入环境。但在这里，当我们在文本字段中使用type=“date”时，该图标会自动显示。嗯，我认为它是特定于浏览器的。。。在firefox中，右边没有图标，但在chrome中有。我想我做到了。你能检查相同的代码沙盒链接吗？