为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>
    )
}

这个方案很好，但是当我进入图标的悬停模式时，会在设置为普通鼠标指针之前先看到默认的手型指针。我该如何处理这个问题？

- patrickhuang94

Answer 1

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

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

- Yo Wakita

---

有趣。我们似乎得到了不同的行为。我只是真诚地想知道是否有适当的解决方案。无论如何，谢谢！ - patrickhuang94

请注意，我使用的是 style 而不是 hoverStyle。我的解决方案对您无效吗？ - Yo Wakita

哦，没注意到。那真的解决了哈哈。谢谢。 - patrickhuang94

Answer 2

一些提示供读者参考。如果您在使用Material-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>

• 在提示框中，将其标题设置为用户单击按钮时应该期望的内容。
• 在IconButton中，为aria（屏幕阅读器）添加一些说明，例如“返回主页”。在样式中，使用类。您将拥有可以用于该组件的常量，然后为实际元素的类名给出描述性标题。这是您可以控制光标和悬停操作的地方。
  • 在实际图标中，给它一个类，这样您就可以像更改颜色等其他操作。

现在您需要为该组件进行样式设置，无论您如何命名，但最好根据组件的目的来命名。

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

- JGallardo