Setting hovered style for material-ui IconButton

Question

According to React Material-UI docs, I have a prop hoveredStyle to work with: http://www.material-ui.com/#/components/icon-button

I want to use IconButton for two purposes:

1. Utilize its tooltip prop for accessibility
2. I can wrap Material-UI svg icons directly

However, I don't want the cursor to change to a pointer when I hover (which is default behavior I believe), so I changed it like so.

import DeleteIcon from 'material-ui/svg-icons/action/delete

const hoveredStyle = {
    cursor: 'initial'
}

render() {
    return (
        <IconButton tooltip="Description here" hoveredStyle={hoveredStyle}>
            <DeleteIcon />
        </IconButton>
    )
}

This works fine, except that the split millisecond that I enter hover mode on the icon, I still see the default hand pointer before it gets set to the normal mouse pointer. How do I approach this?

Answer 1

I just tested adding a cursor: default to the style of both IconButton and DeleteIcon and it seems to have the functionality you want. (No pointer cursor on hover.)

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