How to style button from Material UI icon button

Question

I am wondering how to apply styles to the Material UI's underlying Button from the IconButton. For example, in order to change the close icon hover/focus color, I need to currently change the :hover and :focus classes. It seems like there should be an easier way of doing this, the the ButtonBase API docs do in fact provide a class for this: focusVisible. However, nothing I have attempted to try successfully applies this styling.

const useStyles = makeStyles({
  closeButton: {
    "&:hover": { backgroundColor: "yellow" },
    "&:focus": { backgroundColor: "yellow" }
  }
});

const classes = useStyles();

return (
  <IconButton classes={{
      root: classes.closeButton,
      // This gives a warning that "focusVisible" class doesn't exist
      //   on IconButton (which is true, it comes from ButtonBase).
      focusVisible: classes.closeButton
    }}
  >
    <Icon>close</Icon>
  </IconButton>
);

I can't figure out for the life of me how this should work, as their docs don't mention anything like this that I can find. Any ideas?

Icon Button API Docs Button Base API Docs

Frei

You gave same class name for both root and focusVisible. Try changing their name different for both. – Anthropo

Answer 1

Here's the relevant portion of the documentation: https://material-ui.com/customization/components/#pseudo-classes

Here's an example of how to do this:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const useStyles = makeStyles(theme => ({
  customHoverFocus: {
    "&:hover, &.Mui-focusVisible": { backgroundColor: "yellow" }
  }
}));

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

  return (
    <div>
      <IconButton aria-label="Delete">
        <DeleteIcon />
      </IconButton>
      <IconButton className={classes.customHoverFocus} aria-label="Delete">
        <DeleteIcon />
      </IconButton>
    </div>
  );
}

Habitant

My sincere appreciate for this answer! I will confess that I did read this documentation but did not comprehend it until seeing it here. I was confused by the apparent use of "CSS" rather than JSS, but now understand it to be referring to the generated CSS. I am still confused by why they mention focusVisible as a CSS class for overriding with classes then, unless classes can only override the component itself (ie. only ButtonBase where it is defined and not in IconButton that inherits from it). – Frei

Answer 2

My solution when the button is focused the icon changes it:

button: {
    color: theme.palette.primary.main,
    "&:hover": {
        "& .MuiSvgIcon-root":{
            color: theme.palette.primary.light,
        }
    },
},
buttonIcon: {
    color: theme.palette.common.white,
},

And the components:

<Button
  variant="contained"
  className={classes.button}
  startIcon={<AddIcon className={classes.buttonIcon} />}
  disableRipple
  disableElevation
  disableFocusRipple
  onClick={() => null}
>
  Example
</Button>;

To reduce the global scope you can select the button icon class inside the button.

Macaluso

Answer 3

I try this:

<IconButton
  sx={{
    '&:hover': {
      backgroundColor: (theme) => theme.palette.info.main
    }
  }}
>

Coati