Javascript 设置材质ui图标按钮的悬停样式

根据React Material UI docs，我有一个道具

hoveredStyle

：

我想使用

IconButton

有两个目的：

利用其

工具提示

道具实现辅助功能

我可以直接包装材质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>
    )
}

从“材质ui/svg图标/操作/删除”导入删除图标
常数hoveredStyle={
光标：“首字母”
}
render（）{
返回(
)
}

---

这很好，除了我在图标上进入悬停模式的分割毫秒外，在设置为正常鼠标指针之前，我仍然可以看到默认的指针。如何实现这一点？

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

const noPointer={cursor:'default'}；
返回(
);

---

给那些在这条线索上绊倒的人的一些注意事项。如果您对图标的悬停样式有问题，如果您使用的是材质ui，您可能忘记了什么

在我的例子中，我使用了

并将其包装在

中。我根本无法在那里获得悬停样式，包括一个简单的手“光标”。我不得不用

包装图标。在该元素中可以传递样式

虽然之前作为“公认答案”提供的示例确实解决了初始问题，但它不是生产级别

如果您使用的是reactjs，则需要将以下内容导入到组件中，并使用相应的图标进行切换

import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';

在图标包装中，如下所示

<Tooltip title="">
  <IconButton 
    aria-label=""
    style={componentStyle.iconBack}
  >
    <KeyboardArrowLeft
      style={componentStyle.eventHeadingBack}
      onClick={}
    />
  </IconButton>
</Tooltip>

---

有趣。我们似乎有不同的行为。我只是想看看是否有合适的解决方案。无论如何谢谢你！请注意，我使用的是

style

，而不是

hoverStyle

。我的解决方案不适合你吗？哦，我没注意到。那完全解决了，哈哈。谢谢

<Tooltip title="">
  <IconButton 
    aria-label=""
    style={componentStyle.iconBack}
  >
    <KeyboardArrowLeft
      style={componentStyle.eventHeadingBack}
      onClick={}
    />
  </IconButton>
</Tooltip>

const componentStyle = {
  container: { 
    display: 'flex', 
    width: '100%', 
    height: '100vh', 
    backgroundColor: '#212121', 
  },
  iconBack: {
    cursor: 'crosshair'
  },
  eventHeadingBack: {
    color: '#fff',
    marginRight: '16px'
  }
}