为 material-ui IconButton 设置悬停样式

Question

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

我想 IconButton 用于两个目的：

利用其 tooltip 辅助功能
我可以直接包装 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>
);

Answer 2

为偶然发现此线程的人提供的一些注释。如果您在使用 Material-ui 时遇到图标悬停样式的问题，您可能忘记了什么。

在我的例子中，我使用了 <KeyboardArrowLeft/> 并将其包裹在 <Tooltip/> 中。我根本无法在其中获得悬停样式，包括简单的手 "cursor"。我不得不用 <IconButton> 包裹图标。您可以在该元素中传递样式。

虽然之前作为 "accepted answer" 提供的示例确实解决了最初的问题，但它不是生产级别的。

如果您使用的是 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（屏幕阅读器）添加一些描述，例如 "back to home page"。在样式中，使用了一个class。您将拥有一个可用于您正在处理的组件的常量，然后为实际元素的 class 名称指定一个描述性标题。您可以在此处控制光标和悬停操作。
- 在实际的图标中，给它一个 class 这样你就可以做一些事情，比如改变颜色。

现在您需要设置组件的样式，根据需要命名，但最好根据组件的用途命名。

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

为 material-ui IconButton 设置悬停样式

Setting hovered style for material-ui IconButton

javascript

css

reactjs

material-ui