javascript - 为 material-ui IconButton 设置悬停样式

Question

根据 React Material-UI 文档，我有一个 Prop 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>
    )
}

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

Answer 1

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

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