如何从 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 按钮设置悬停行为

将样式表和图标添加到 QStyleOptionButton

Mui Radio 填充颜色

如何使用 WPF 按钮的参数或绑定来更改 XAML 样式中的 fa 图标

Layui(二):图标和按钮

如何在反应、样式化的组件中使用字体真棒图标更改单选按钮的颜色