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/>中。我根本无法获得包括简单的“光标”在内的悬停样式。我必须用<IconButton>包装图标。您可以在该元素中传递样式。

虽然前面提供的示例作为“可接受的答案”确实解决了最初的问题，但它不是生产水平。

如果您正在使用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，可用于正在使用的该组件，然后为实际元素的类名指定一个描述性标题。您可以在此处控制光标和悬停操作。
- 在实际的图标中，给它一个类，以便您可以进行诸如更改颜色之类的事情。

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

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

设置材料的悬停样式-ui IconButton

2 个答案: