为何手动添加Mui-focusVisible类后，Mui IconButton不显示聚焦样式？

问题根源 #

MUI的IconButton的focusVisible样式并非单纯依赖Mui-focusVisible类名，而是结合了组件内部状态与:focus-visible伪类的逻辑。手动添加类名时，缺少组件内部状态的关联，导致样式无法触发。

可行解决方案 #

方案1：利用IconButton自带的focusVisible属性控制状态

MUI的IconButton提供了focusVisible布尔属性，直接控制组件是否应用聚焦样式，这是最可靠的方式：

import { useState, useEffect } from 'react';
import IconButton from '@mui/material/IconButton';

const YourComponent = (props) => {
  const [isFocusVisible, setIsFocusVisible] = useState(false);
  const { lastFocusedElementId } = useActiveInputElement();

  useEffect(() => {
    const targetIdMatches = lastFocusedElementId === props.id;
    setIsFocusVisible(targetIdMatches);
    
    if (targetIdMatches) {
      const btnElement = document.getElementById(props.id);
      btnElement?.focus({ preventScroll: true });
    }
  }, [lastFocusedElementId, props.id]);

  return (
    <IconButton
      id={props.id}
      sx={props.sx}
      focusVisible={isFocusVisible}
    >
      {props.icon}
    </IconButton>
  );
};

方案2：自定义样式强制覆盖

如果方案1不生效，可以直接在sx中定义Mui-focusVisible类的样式，确保优先级足够：

<IconButton
  id={props.id}
  sx={{
    ...props.sx,
    '&.Mui-focusVisible': {
      boxShadow: '0 0 0 2px rgba(25, 118, 210, 0.5)',
      outline: '2px solid #1976d2',
      outlineOffset: '2px',
      // 可根据需求调整为与键盘导航一致的样式
    }
  }}
  className={lastFocusedElementId === props.id ? 'Mui-focusVisible' : ''}
>
  {props.icon}
</IconButton>

关键说明 #

• 脚本触发的focus()不会自动触发浏览器的:focus-visible伪类，因此必须通过组件内部状态或自定义样式来模拟键盘导航的聚焦效果。
• 优先使用方案1，因为它遵循MUI的组件设计逻辑，避免样式冲突。

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