如何从 MUI 图标按钮设置按钮样式
Posted
技术标签:
【中文标题】如何从 MUI 图标按钮设置按钮样式【英文标题】:How to style button from MUI icon button 【发布时间】:2019-11-09 20:24:16 【问题描述】:我想知道如何从 IconButton
将样式应用于 Material UI 的底层 Button
。例如,为了更改关闭图标悬停/焦点颜色,我目前需要更改 :hover
和 :focus
类。似乎应该有一种更简单的方法来做到这一点,ButtonBase
API 文档实际上为此提供了一个类:focusVisible
。但是,我没有尝试成功应用此样式。
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>
);
我一生都无法弄清楚这应该如何工作,因为他们的文档没有提到我能找到的任何类似的东西。有什么想法吗?
Icon Button API Docs Button Base API Docs
【问题讨论】:
您为 root 和 focusVisible 提供了相同的类名。尝试为两者更改不同的名称。 【参考方案1】:这是文档的相关部分:https://material-ui.com/customization/components/#pseudo-classes
以下是如何执行此操作的示例:
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>
);
【讨论】:
我衷心感谢您的回答!我承认我确实阅读了此文档但直到在这里看到它才理解它。我对“CSS”而不是 JSS 的明显使用感到困惑,但现在理解它指的是生成的 CSS。我仍然对为什么他们提到focusVisible
作为 CSS 类以覆盖 classes
感到困惑,除非 classes
只能覆盖组件本身(即只有 ButtonBase
定义它而不是 IconButton
继承自它)。【参考方案2】:
当按钮获得焦点时,我的解决方案会改变它:
button:
color: theme.palette.primary.main,
"&:hover":
"& .MuiSvgIcon-root":
color: theme.palette.primary.light,
,
,
buttonIcon:
color: theme.palette.common.white,
,
以及组件:
<Button
variant="contained"
className=classes.button
startIcon=<AddIcon className=classes.buttonIcon />
disableRipple
disableElevation
disableFocusRipple
onClick=() => null
>
Example
</Button>;
要缩小全局范围,您可以选择按钮内的按钮图标类。
【讨论】:
以上是关于如何从 MUI 图标按钮设置按钮样式的主要内容,如果未能解决你的问题,请参考以下文章
如何为 ButtonGroup 内的 MUI 按钮设置悬停行为