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>
);

Answer 2

Some notes for people stumbling upon this thread. If you are having a problem with hover styles for an icon if you are using Material-ui you might have forgot something.

In my case I used a <KeyboardArrowLeft/> and wrapped it in a <Tooltip/> . I could not get hover styles in there at all including a simple hand "cursor". I had to wrap the icon with <IconButton> . It is in that element where you can pass styles.

While the example that was provided before as the "accepted answer" does solve the initial problem, it is not production level.

If you are using reactjs you will need to import the following into your component, switch with your respective icon

import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';

In the icon wrap as follows

<Tooltip title="">
  <IconButton 
    aria-label=""
    style={componentStyle.iconBack}
  >
    <KeyboardArrowLeft
      style={componentStyle.eventHeadingBack}
      onClick={}
    />
  </IconButton>
</Tooltip>

• In the Tooltip, give it a title of what the user should expect when clicking the button.
• In the IconButton, add some description for aria (screen readers) like "back to home page". In the style, use a class. You will have a const that you can use for that component you are working on, then give the classname for the actual element a descriptive title. This is where you can control the cursor and hover actions.
  • In the actual icon, give it a class so you can do things like change color.

Now you will need to style the component, name it however you want but ideally according to the components purpose.

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