为 material-ui IconButton 设置悬停样式

Question

根据 React Material-UI 文档，我有一个可以使用的道具hoveredStyle：http : //www.material-ui.com/#/components/icon-button

我想IconButton用于两个目的：

1. 利用它的tooltip道具来实现可访问性
2. 我可以直接包装 Material-UI svg 图标

但是，当我悬停时，我不希望光标更改为指针（我相信这是默认行为），所以我像这样更改了它。

import DeleteIcon from 'material-ui/svg-icons/action/delete

const hoveredStyle = {
    cursor: 'initial'
}

render() {
    return (
        <IconButton tooltip="Description here" hoveredStyle={hoveredStyle}>
            <DeleteIcon />
        </IconButton>
    )
}

这工作正常，除了我在图标上进入悬停模式的分割毫秒之外，我仍然看到默认的手形指针在它被设置为普通鼠标指针之前。我该如何处理？

Answer 1

我刚刚测试了添加一个光标：默认为 IconButton 和 DeleteIcon 的样式，它似乎具有您想要的功能。（悬停时没有指针光标。）

const noPointer = {cursor: 'default'};
return (
  <div>
    <IconButton tooltip="Description here" style={noPointer}>
      <DeleteIcon style={noPointer} />
    </IconButton>
  </div>
);