Bottom Navigation Material UI Override - css

Question

I'm trying to override the colour of the bottom navigation icon from material UI [here][1]. This is my css code:
.MuiButtonBase-root{
color: #007A78;
}
.MuiBottomNavigationAction-root{
color: #007A78;
}
.Mui-selected{
color: #007A78;
}
I'm trying to change the default blue colour into my colour (green). However, I only notice the text changes colour, not the icon:
[![enter image description here][2]][2]
I use the elements to see the css and apparently the colour doesn't change for the icon. It's still the same blue colour.
[![enter image description here][3]][3]
Does anyone know how to override this?
[1]: https://mui.com/api/bottom-navigation-action/
[2]: https://i.stack.imgur.com/cG9DW.png
[3]: https://i.stack.imgur.com/joxTL.png

Answer 1

You can use sx to update the styling of the bottom navigation component from the Material UI. You can style the classes individually to apply different styles based on the UI.
sx={{
"& .MuiBottomNavigationAction-root, .Mui-selected, svg": {
color: "#007A78"
}
}}
to style only the active navigation item, you can target the .Mui-selected class as below
sx={{
"& .Mui-selected, .Mui-selected > svg": {
color: "#007A78"
}
}}
Complete code example
import * as React from "react";
import Box from "#mui/material/Box";
import BottomNavigation from "#mui/material/BottomNavigation";
import BottomNavigationAction from "#mui/material/BottomNavigationAction";
import RestoreIcon from "#mui/icons-material/Restore";
import FavoriteIcon from "#mui/icons-material/Favorite";
import LocationOnIcon from "#mui/icons-material/LocationOn";
export default function SimpleBottomNavigation() {
const [value, setValue] = React.useState(0);
return (
<Box sx={{ width: 500 }}>
<BottomNavigation
showLabels
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
sx={{
"& .MuiBottomNavigationAction-root, .Mui-selected, svg": {
color: "#007A78"
}
}}
>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>
</Box>
);
}

Answer 2

You could use
<paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
if you are trying to make a bottom navigation.