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

CodePudding user response：

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