CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Roman S
Roman S

Reputation: 171

Hover effect on IconButton in Material-UI

IconButton Hover

This is an iconButton from Material-UI that I am using. As you can see there is a slight grey border around the icon when you hover on it. What is the property to disable this? I have not found it in Material-UI docs, and I need to get rid of this grey hover feature.

Code:

<IconButton>
    <BackButton />
</IconButton>

Upvotes: 17

Views: 50250

Answers (6)

Aldous S.
Aldous S.

Reputation: 17

You can use hoverColor: Colors.transparent :

IconButton(
  hoverColor: Colors.transparent, 
  icon: Icon(Icons.clear_rounded),
  onPressed: () {},
),

Upvotes: 0

alberto gutierrez
alberto gutierrez

Reputation: 61

<IconButton sx={{ "&:hover": { color: "green" } }}>
    <BackButton />
</IconButton>

Upvotes: 6

A1I
A1I

Reputation: 39

It is possible to use makeStyles(styles) hook logic to change default material-ui IconButton CSS Pseudo-classes e.g. :hover style

code example:

import { makeStyles } from "@material-ui/core/styles";
import { IconButton } from "@material-ui/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";

const useStyles = makeStyles((theme) => ({
  myClassName: {
    backgroundColor: "#EFD26E",
    position: "relative",
    "&:hover": {
      backgroundColor: "green"
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <IconButton color="inherit" className={classes.myClassName}>
        <ArrowBackIcon />
      </IconButton>
    </div>
  );
}

screens:

Upvotes: 1

Gautam Mukoo
Gautam Mukoo

Reputation: 9

You can add hover by wrapping component using @material-ui Tooltip

<Tooltip>
  ...your code here
</Tooltip>

Upvotes: -3

Konstantinos Kalaras Lafkiotis
Konstantinos Kalaras Lafkiotis

Reputation: 371

(Alternative Way)

You can also override the IconButton style via MuiThemeProvider:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiIconButton: {
      root: {
        '&:hover': {
          backgroundColor: "$labelcolor"
        }
      }
    }
  }
})

And Wrap your component that you want to edit with this code:

<MuiThemeProvider theme={theme}>

// Your Component here

</MuiThemeProvider>

Upvotes: 16

Kevin Raoofi
Kevin Raoofi

Reputation: 1033

There is no property to disable it. You'll just have to override the CSS:

<IconButton className={"MyCustomButton"}>
    <BackButton />
</IconButton>

With a css rule like:

.MyCustomButton:hover {
  background-color: inherit !important;
}

Upvotes: 7

Related Questions