材质 UI 按钮移除焦点框

Posted 2023-03-07

【中文标题】材质 UI 按钮移除焦点框

【英文标题】：Material UI Button remove focus frame

【发布时间】：2020-03-17 23:55:51

【问题描述】：

有没有办法移除 Material UI Button 的焦点框？

我尝试用box-shadow: none 添加一个CSS 类.focusframe，但这似乎并没有移除焦点框。单击时，该按钮将保留在此红色焦点框上。

带有 Button 渲染的 TypeScript 类：

export class App extends React.Component<AppProps, AppState> 
    public componentDidMount() 
        this.setState(sessionLoaded: true);
    

    public render() 
        if (this.state) 
            return <div>
                <Button className='focusframe' onClick=() => console.log("Material UI Button clicked!") color='primary' variant='contained'>Click Me!</Button>
            </div>;
         else 
            return <div>State not yet accessible.</div>;
        
    

SCSS 类：

@import "~bootstrap/scss/bootstrap";
@import "_colors.scss";

body 
    background-color: $body-color-base;
    color: $body-color-font;

    .focusframe 
        box-shadow: none;
    

点击按钮前：

点击按钮后：

编辑 1：

按钮的 html：

<div>
  <button class="MuiButtonBase-root MuiButton-root MuiButton-contained focusframe MuiButton-containedPrimary" tabindex="0" type="button">
    <span class="MuiButton-label">
      Click Me!
    </span>
    <span class="MuiTouchRipple-root">
    </span>
  </button>
</div>

SCSS 文件 _colors.scss：

$body-color-base: #343a40;
$body-color-font: #dddddd;

编辑 2：

如果我在全局范围内设置它会起作用：

*:focus 
    outline: none !important;

但如果我将它设置为.focusframe 类，它就不起作用：

@import "~bootstrap/scss/bootstrap";
@import "_colors.scss";

body 
    background-color: $body-color-base;
    color: $body-color-font;

    .focusframe 
        :focus 
            outline: none;
        
    

【问题讨论】：

那个“焦点框”不是来自 Material-UI。我怀疑这是您正在导入的某些全局样式的副作用（例如“~bootstrap/scss/bootstrap”、“_colors.scss”）。您应该能够使用 Chrome 开发人员工具对其进行检查，以确定样式的来源。

【参考方案1】：

通过 CSS 禁用 outline

*:focus 
    outline: none;

根据您的编辑，您的 css 选择器是错误的：

body 
    background-color: $body-color-base;
    color: $body-color-font;

    .focusframe 
        &:focus  <--- & here
            outline: none;
        
    

【讨论】：

可能有一些更具体的规则。尝试使用 MuiButton-root:focus 或 button:focus

好的，与号“&”是缺失的部分。谢谢！您能解释一下“&”符号的确切含义吗？

在 Sass/Scss 中，它基本上意味着将当前选择器与外部选择器连接起来，因此 .focusframe &:focus ... 它在 .focusframe:focus ... 中编译.focusframe :focus ... 它编译在不同的 .focusframe :focus ... 中。 Extra info

您可能需要在第一个答案中添加!important。

【参考方案2】：

你可以使用 makeStyle 钩子如下

import  Button, makeStyles  from '@material-ui/core';
import clsx from 'clsx';

const useStyles = makeStyles(
    root: 
        position:"fixed",
        bottom:0,
        right:0,
        border:0,
        '&:focus': 
            outline:0,
            border:0,
        
    ,
);

function ChatBtn(onClick) 
    const classes = useStyles();
    return (
        <Button
            className=classes.root
            color="inherit"
            variant="outlined" 
            aria-label="open drawer"
            edge="start"
            
            onClick=onClick
        >
            LIVE CHAT
        </Button>
    );


export default ChatBtn;