如何为Material-UI的BottomNavigationAction设置选中图标异色样式？

核心问题分析 #

你遇到的问题主要有两个：

1. Styled选择器写法错误：之前的写法没有精准定位选中状态下的图标样式，要么范围过大导致样式混乱，要么优先级不够无法覆盖默认样式。
2. 缺少value属性绑定：你的TabBarButton（即BottomNavigationAction）未设置value属性，导致BottomNavigation无法正确标记选中项，样式自然不会生效。

正确解决方案 #

1. 修正Styled组件的样式写法

使用&.Mui-selected嵌套选择器精准定位选中状态的按钮，同时强制图标（svg）继承父元素的颜色，确保覆盖第三方图标的默认样式：

import { BottomNavigation, BottomNavigationAction } from "@mui/material";
import { styled } from '@mui/system';

const TabBarButton = styled(BottomNavigationAction)({
  // 未选中状态：图标和标签显示绿色（#00f）
  color: '#00f',

  // 选中状态：图标和标签显示红色（#f00）
  '&.Mui-selected': {
    color: '#f00',
    // 让第三方svg图标继承父按钮的颜色
    '& svg': {
      color: 'inherit',
    },
  },
});

2. 给每个TabBarButton添加value属性

BottomNavigation通过自身的value与子项的value匹配来标记选中状态，必须给每个按钮设置对应的value：

const BottomNav = () => {
  // 假设你已定义value和setValue状态
  // const [value, setValue] = useState("Home");

  return(
      <BottomNavigation
          showLabels
          value={value}
          onChange={(event, newValue) => {setValue(newValue)}}
      >                
          <TabBarButton 
              value="Home"  // 必须添加该属性
              id='Home' 
              label='Home' 
              icon={home_icon ? <AiFillHome size="30" /> : <AiOutlineHome size='30'/>}
              onClick={(e) => iconHandler(e.currentTarget.id)}
          />

          <TabBarButton
              value="Documentos"  // 必须添加该属性
              id='Documentos' 
              label='Documentos' 
              icon={documentos_icon ? <RiEditBoxFill size='30'/> : <RiEditBoxLine size='30'/>}
              onClick={(e) => iconHandler(e.currentTarget.id)}
          />
      </BottomNavigation>
  );
}

为什么之前的写法不行？ #

• 第一种写法用root和selected作为样式键是错误的，styled函数的对象参数直接对应组件根元素样式，而Material-UI的选中状态是通过.Mui-selected类实现的，并非这种键值对写法。
• 第二种写法未处理第三方图标的优先级问题，第三方svg图标可能自带颜色样式，需要明确设置inherit来继承父按钮的颜色。
• 第三种写法的选择器.Mui-selected, svg是“或”逻辑，会选中所有.Mui-selected元素和所有svg，导致所有图标变红，这是选择器语法错误，应该用&.Mui-selected svg表示“选中状态按钮下的svg”。

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