How to style Material-UI's BottomNavigationAction, so the selected icon is a different color?-CodePudding

I need some help with this problem I'm having with Material-UI styled components

I'm trying to create a BottomNavigation bar on react using Material-UI v5. I want that the icon of the selected option in the bar shows a specific color, let's say red (#f00) and the not-selected icons show green (#00f), for this I'm using the styled function to generate a custom-themed component for BottomNavigationAction, following the guidelines on the documentation: styled(). The problem: For the selected button, the icon is not grabbing the correct color and is showing the default one. At this point I'm not sure if I'm using the styled function wrong or is something super obvious I'm not seeing. Thanks in advance for any advice!

PS: I don't have enough reputation to post the image directly, sorry for that

The BottomNavigation is defined as follows:

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>
        );
    }

To define TabBarButton I firstly tried defining the component like this:

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

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

But the rule names: root and selected didn't work, resulting in the default colors being applied:
first-try-bottom-navigation-image

So I changed them to the Global Class instead : BottomNavigationAction CSS :

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

Which worked with the not-selected icon and the labels:

second-try-bottom-navigation-image

But the selected icon 'Home' is still using the default colors, I tried using a variation of the answer provided on this post Bottom Navigation Material UI Override

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

But this affects both icons resulting in :

third-try-bottom-navigation-image

CodePudding user response：

I think TabBarButton need to add '&.Mui-selected' selector to have the styles attached to itself correctly, otherwise with '.Mui-selected' the rules only apply to nested elements:

Tested the example on: stackblitz

// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
  color: 'royalblue',
  '&.Mui-selected': {
    color: 'crimson',
  },
});