I'm facing an issue with Material-UI styled components and could use some assistance. My goal is to create a BottomNavigation bar in React using Material-UI v5 where the selected option's icon displays in red (#f00) while the unselected icons show in green (#00f). I've been attempting to achieve this by utilizing the styled function to customize a themed component for BottomNavigationAction, as outlined in the documentation: styled(). However, I'm encountering a problem – the selected button's icon isn't reflecting the correct color and instead continues to display the default color. I'm unsure if I'm misusing the styled function or overlooking something obvious. Any guidance would be greatly appreciated!
PS: I apologize for not being able to directly post the image due to insufficient reputation
The BottomNavigation setup is 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>
);
}
Initially, I attempted defining the TabBarButton 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',
}
});
However, the rule names root and selected did not produce the desired results, applying the default colors instead - you can view the outcome here
Subsequently, I adjusted them to apply to the Global Class instead following the BottomNavigationAction CSS:
// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
color: '#0f0',
'.Mui-selected':{
color: '#f00',
}
});
This modification worked for the unselected icons and labels as displayed here. But the selected icon 'Home' still retains the default colors. In an attempt to resolve this, I experimented with a variation of the solution provided in this post Bottom Navigation Material UI Override
// Styled BottomNavigationAction
const TabBarButton = styled(BottomNavigationAction)({
color: '#0f0',
'.Mui-selected, svg':{
color: '#f00',
}
});
However, this adjustment affects both icons resulting in the outcome shown here