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