reactjsmaterial-uijss

How to style button from Material UI icon button


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


Solution

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

    Edit IconButton hover focus