0

Hi i'm trying to map Bottom Navigation & change selected color change for component using MUI react. I have mapped as per below answer. I changed background color struck with the selected color change for navigation. Below is my code.what is missing ? Thanks

 import 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 const SimpleBottomNavigation = ({ navicons, }) => {
    const [value, setValue] = React.useState(0);

    return (
    <Box sx={{ width: 500,  }}>

                <BottomNavigation
                    showLabels
                    value={value}
                    onChange={(event, newValue) => {
                        setValue(newValue);
                    }}
                >
                    {navicons.map((item) => (
                        <BottomNavigationAction icon={item.icon} label={item.label} />

                    ))}


                </BottomNavigation>

            </Box>
        </ThemeProvider>
    );
}

export const LabelBottomNavigation = LabelBottomNavigations.bind({});
MuiBottomNavigation: {
      styleOverrides: {
        root: {
          backgroundColor: "#cccccc",
        },
      },
    },

    MuiBottomNavigationAction: {
      styleOverrides: {
        root: {
          color: "red;",
        },
      },
    },
   $Muiselected: {
      styleOverrides: {
        root: {
          color: "#ffffff;",
        },
      },
    },
Advi
  • 69
  • 6

1 Answers1

0

This

<BottomNavigationAction {item.icon}{item.label} />

Should be looking like this

<BottomNavigationAction icon={item.icon} label={item.label} />

Try and let me know

enter image description here

Zhivko Nikolov
  • 145
  • 1
  • 11
  • Added Image , it is same as MUI Bottom Navigation . Thanks – Advi Oct 17 '22 at 16:28
  • @Thanks its working. – Advi Oct 17 '22 at 18:01
  • Any idea how do i change background color to bottom navigation ?Thanks – Advi Oct 18 '22 at 04:53
  • take a look [here](https://stackoverflow.com/questions/54375096/styling-bottomnavigation-in-react-js-material-ui) – Zhivko Nikolov Oct 18 '22 at 05:14
  • I went through the link but couldn't find to change Background color of entire bottom Navigation. Currently it is .css-16lloyr-MuiBottomNavigation-root{background-color:#fff) how do i override it to different color ? – Advi Oct 18 '22 at 05:41