如何移除Material UI按钮聚焦状态下的蓝色轮廓？

针对你遇到的Outlined Button点击后出现蓝色轮廓的问题，有两种可靠的解决方式：

方法1：使用官方属性禁用焦点涟漪 #

Material UI的Button组件提供了disableFocusRipple属性，直接添加即可移除默认的焦点轮廓效果：

<Button 
  color="inherit"
  variant="outlined"
  onClick={handleOpenUserMenu}
  disableFocusRipple // 添加该属性
  sx={{ 
    textTransform: 'none',
    alignItems: 'flex-start',
    borderWidth: '1px',
    borderColor: '#BDBDBD',
    '&:hover': {
      borderWidth: '1.5px',
      borderColor: '#757575',
    },
  }}>
  <Box sx={{ 
    display: "flex", 
    flexDirection: "column", 
    alignItems: "flex-start" }}>
    <Typography sx={{ fontWeight: 500 }}>
      Hello, {GlobalState.userUsername}
    </Typography>
    <Typography sx={{ fontSize: "0.8rem", color: "grey.400" }}>
      Accounts & Settings
    </Typography>
  </Box>
</Button>

方法2：自定义覆盖焦点样式 #

如果需要更灵活的控制（比如仅移除鼠标点击的焦点样式，保留键盘导航的焦点反馈），可以在sx属性中覆盖:focus-visible伪类的样式：

<Button 
  color="inherit"
  variant="outlined"
  onClick={handleOpenUserMenu}
  sx={{ 
    textTransform: 'none',
    alignItems: 'flex-start',
    borderWidth: '1px',
    borderColor: '#BDBDBD',
    '&:hover': {
      borderWidth: '1.5px',
      borderColor: '#757575',
    },
    // 覆盖焦点轮廓样式
    '&:focus-visible': {
      outline: 'none',
      boxShadow: 'none', // 可选：若存在额外阴影可一并移除
    },
  }}>
  <Box sx={{ 
    display: "flex", 
    flexDirection: "column", 
    alignItems: "flex-start" }}>
    <Typography sx={{ fontWeight: 500 }}>
      Hello, {GlobalState.userUsername}
    </Typography>
    <Typography sx={{ fontSize: "0.8rem", color: "grey.400" }}>
      Accounts & Settings
    </Typography>
  </Box>
</Button>

为什么之前的方法无效？ #

你之前尝试的方案可能未针对:focus-visible伪类——现代浏览器及Material UI新版本会用这个伪类区分「键盘触发的焦点」和「鼠标点击的焦点」，普通的:focus选择器优先级或触发条件不匹配，导致样式未生效。

内容的提问来源于stack exchange，提问作者Charlie