Question

17

Setting hovered style for material-ui IconButton

rated 0 times [ 22] [ 5] / answers: 1 / hits: 30953 / 7 Years ago, tue, march 7, 2017, 12:00:00

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:

Utilize its tooltip prop for accessibility

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryderalfonsos

Add To Favorites

Follow

Total Points: 655

Total Questions: 88

Total Answers: 91

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

ryderalfonsos questions

1 React application with Service Worker - Force update of browser cache on new version

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Call Action Method on button click ASP.NET MVC

Mon, Sep 9, 19, 00:00, 5 Years ago

1 Customizing the JS/CSS in a TrustPilot widget

Wed, Feb 13, 19, 00:00, 5 Years ago

1 How to display a string javascript in HTML

Tue, Feb 12, 19, 00:00, 5 Years ago

1 How to make an undo function in canvas?

Fri, Dec 28, 18, 00:00, 6 Years ago

View All

answered 7 Years ago daijac · Accepted Answer

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>

);