How to disable/remove MUI v5 BottomNavigation selected css style-CodePudding

Im trying to create a bottom navigation for mobile view and i would like to disable/remove the selected css style when the icon is clicked/pressed.

So whenever i click on an icon, the default style would make the text and icon larger. I want it to be the same size.

Please help. My code is down below.

import { useState } from 'react';
import Box from '@mui/material/Box';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import AddIcon from '@mui/icons-material/Add';
import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
import { useNavigate } from 'react-router-dom';
import { styles } from './styles';

const BottomNav = () => {
const [value, setValue] = useState(0);
const navigate = useNavigate();

return (
 <Box
   sx={{
     width: '100%',
     position: 'fixed',
     bottom: 0
   }}
 >
   <BottomNavigation
     showLabels
     value={value}
     onChange={(event, newValue) => {
      setValue(newValue);
     }}
  >
     <BottomNavigationAction
       disableRipple
       // onClick={}
       label='History'
       icon={<AccessTimeIcon sx={styles.icon} />}
     />
     <BottomNavigationAction
       disableRipple
       label='Workout'
       icon={<AddIcon sx={styles.icon} />}
     />
    <BottomNavigationAction
      disableRipple
      label='Exercise'
      icon={
        <FitnessCenterIcon style={styles.icon} sx={{ rotate: '135deg' }} />
      }
    />
  </BottomNavigation>
</Box>
 );
};

export default BottomNav;

CodePudding user response：

You can add a styled component for the BottomNavigation like this

import { styled } from "@mui/material/styles";


const BottomNavigationStyled = styled(BottomNavigation)`
  & .Mui-selected {
    font-size: 12px;
  }
`;

    <BottomNavigationStyled
            showLabels
            value={value}
            onChange={(event, newValue) => {
              setValue(newValue);
            }}
          >
          ...
    </BottomNavigationStyled>

or you can set it in your theme for a more global change like this:

    MuiBottomNavigation: {
      styleOverrides: {
        root: {
          '.Mui-selected': {
            fontSize: '12px',
          },
        }
      }
    }

Here is the working codesandbox

CodePudding user response：

Alternatively you could do it like this:

 <BottomNavigationAction
          sx={{
            "& .Mui-selected": {
              fontSize: "0.75rem"
            }
          }}
          label="Recents"
          icon={<RestoreIcon />}
        />

It works the same way but it's using inline styling. Basically your icon isn't getting bigger but the fontsize of the text is. This way you can override the MUI components anyway you'd like.

Codesandox: https://codesandbox.io/s/admiring-wave-uim0zh?file=/src/App.js:0-1043