設置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>
    )
}

效果很好，除了我在圖標上進入懸停模式的毫秒間隔外，在將默認指針設置為普通鼠標指針之前，我仍然會看到它。 我該如何處理？

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'
  }
}