我需要一些帮助来解决我在使用材质-UI样式组件时遇到的问题
我尝试使用Material-UI v5创建一个BottomNavigation条。我希望条中选中选项的图标显示特定颜色，比如红色（#f00），未选中图标显示绿色（#00f）。为此，我使用styled函数为BottomNavigationAction生成一个自定义主题的组件，遵循文档中的指南：styled().**问题：**对于选中的按钮，图标没有捕捉到正确的颜色，而是显示默认的颜色。在这一点上，我不确定我是否使用了错误的styled函数，或者是一些超级明显的东西，我没有看到。提前感谢您的任何建议！
PS：我没有足够的信誉直接发布图片，很抱歉
底部导航定义如下：

const BottomNav = () => {
        return(
            <BottomNavigation
                showLabels
                value={value}
                onChange={(event, newValue) => {setValue(newValue)}}
            >                
                <TabBarButton 
                    id='Home' 
                    label='Home' 
                    icon= {home_icon? <AiFillHome size = "30" />: <AiOutlineHome size='30'/> } 
                    onClick={
                        (value)=>{
                            iconHandler(value.currentTarget.id)
                        }
                    }
                />

                <TabBarButton
                    id='Documentos' 
                    label='Documentos' 
                    icon= {documentos_icon? <RiEditBoxFill size='30'/>: <RiEditBoxLine size='30'/>} 
                    onClick={
                        (value) =>
                            iconHandler(value.currentTarget.id)
                        }
                    }
                />
            </BottomNavigation>
        );
    }

为了定义TabBarButton，我首先尝试像这样定义组件：

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

// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
    root: {
        color: '#f00',
    },
    
    selected: {
        color: '#0f0',
    }
});

但规则名称：root和selected不起作用，导致应用默认颜色：
first-try-bottom-navigation-image
所以我将它们改为全局类：底部导航操作CSS：

// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
    color: '#0f0',
    '.Mui-selected':{
        color: '#f00',
    }
});

与未选中的图标和标签一起使用：
second-try-bottom-navigation-image
但是选中的图标“Home”仍然使用默认颜色，我尝试使用这个帖子提供的答案的变体Bottom Navigation Material UI Override

// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
    color: '#0f0',
    '.Mui-selected, svg':{
        color: '#f00',
    }
});

但这会影响两个图标，导致：
third-try-bottom-navigation-image