如何禁用/移除MUI v5 BottomNavigation选中状态的CSS样式

要移除Material-UI BottomNavigationAction点击或选中时的缩放效果，保持图标和文字大小统一，你可以通过覆盖默认CSS样式实现，以下是几种可行方案：

方法1：单个BottomNavigationAction单独设置样式 #

直接给每个BottomNavigationAction添加sx属性，禁用缩放和字体大小变化：

<BottomNavigationAction
  disableRipple
  label='History'
  icon={<AccessTimeIcon sx={styles.icon} />}
  sx={{
    '&.Mui-selected': {
      transform: 'none', // 移除选中时的缩放效果
      '& .MuiBottomNavigationAction-label': {
        fontSize: '0.75rem', // 和未选中状态字体大小保持一致
      }
    },
    '&:hover, &:focus': {
      transform: 'none', // 移除 hover/focus 时的缩放
    }
  }}
/>

方法2：批量设置父组件样式（避免重复代码） #

如果所有导航项都需要相同样式，可以直接在BottomNavigation组件中统一配置子元素样式：

<BottomNavigation
  showLabels
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  sx={{
    '& .MuiBottomNavigationAction-root': {
      '&.Mui-selected': {
        transform: 'none',
        '& .MuiBottomNavigationAction-label': {
          fontSize: '0.75rem',
        }
      },
      '&:hover, &:focus': {
        transform: 'none',
      }
    }
  }}
>
  {/* 你的BottomNavigationAction组件 */}
  <BottomNavigationAction
    disableRipple
    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>

方法3：用styled创建可复用自定义组件 #

如果需要在多个地方复用该样式，可通过MUI的styled函数封装自定义导航项组件：

import { styled } from '@mui/material/styles';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';

const CustomBottomNavAction = styled(BottomNavigationAction)(({ theme }) => ({
  '&.Mui-selected': {
    transform: 'none',
    '& .MuiBottomNavigationAction-label': {
      fontSize: theme.typography.pxToRem(12), // 对应0.75rem，和主题统一
    }
  },
  '&:hover, &:focus': {
    transform: 'none',
  },
}));

// 使用自定义组件
<CustomBottomNavAction
  disableRipple
  label='History'
  icon={<AccessTimeIcon sx={styles.icon} />}
/>

说明 #

默认情况下，MUI会给选中的BottomNavigationAction添加transform: scale(1.1)缩放效果，同时把标签字体从0.75rem放大到0.875rem。我们通过覆盖这些样式，让选中/点击状态和默认状态保持视觉一致。你已经添加的disableRipple只是移除波纹效果，和缩放是独立的设置，需要单独处理。

内容的提问来源于stack exchange，提问作者Henry Dinh