[英]How to style button from MUI icon button
I am wondering how to apply styles to the Material UI's underlying Button
from the IconButton
.我想知道如何从
IconButton
将样式应用到 Material UI 的底层Button
。 For example, in order to change the close icon hover/focus color, I need to currently change the :hover
and :focus
classes.例如,为了更改关闭图标悬停/焦点颜色,我当前需要更改
:hover
和:focus
类。 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
.似乎应该有一种更简单的方法来做到这一点,
ButtonBase
API 文档实际上为此提供了一个类: 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 Icon Button API Docs Button Base API Docs
Here's the relevant portion of the documentation: https://material-ui.com/customization/components/#pseudo-classes这是文档的相关部分: 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>
);
}
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.要缩小全局范围,您可以选择按钮内的按钮图标类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.