如何修改MUI图标的CSS属性，实现聚焦时变色？

你的代码里的聚焦状态选择器写法有误，MUI图标组件的聚焦样式需要正确的CSS选择器语法，调整后代码如下：

<PeopleOutlineIcon 
  onClick={()=>navigate('/dashboard/candidates')}
  sx={{
    color: "black",
    fontSize: 40,
    cursor: "pointer",
    "&:focus": { color: "blue" } // 移除&和:focus之间的空格
  }}
/>

另外还有两个关键注意点：

• 确保图标能获取焦点：给图标添加tabIndex={0}属性，默认SVG元素不一定能触发焦点状态，添加后才可正常响应:focus样式
• 如果要持久区分当前活跃页面的图标，仅靠:focus状态不够（跳转后焦点会丢失），更可靠的方式是结合路由判断：

import { useLocation } from 'react-router-dom';

// 组件内获取当前路由
const location = useLocation();
const isActive = location.pathname === '/dashboard/candidates';

<PeopleOutlineIcon 
  onClick={()=>navigate('/dashboard/candidates')}
  tabIndex={0}
  sx={{
    color: isActive ? "blue" : "black", // 根据路由切换活跃状态颜色
    fontSize: 40,
    cursor: "pointer",
    "&:focus": { color: "blue" } // 保留点击聚焦时的反馈样式
  }}
/>

这种方式既能实现点击时的聚焦颜色反馈，又能持久显示当前页面的活跃图标状态，更贴合你的需求。

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