如何将带href的MUI Tab组件hover颜色改为白色？

当给MUI的Tab组件添加href属性后，它会被渲染为<a>标签，继承默认的链接hover样式（文字变蓝），仅设置textDecoration: 'none'只能去掉下划线，无法修改颜色。可以通过以下几种方式实现hover时文字变为白色：

方法一：直接在sx中覆盖hover伪类样式 #

直接在Tab的sx属性中针对:hover状态设置颜色，同时可保留textDecoration确保无下划线：

<Tab 
  label={element} 
  id={index} 
  sx={{
    display: { xs: 'none', md: 'inherit' },
    '&:hover': {
      color: 'white',
      textDecoration: 'none'
    }
  }} 
  href={`#${navElements[element]}`} 
/>

方法二：通过自定义主题全局配置 #

如果需要所有带href的Tab都应用该样式，可以在MUI主题中统一配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTab: {
      styleOverrides: {
        root: {
          '&:hover': {
            color: 'white'
          },
          // 确保a标签hover时颜色同步
          '& a:hover': {
            color: 'white',
            textDecoration: 'none'
          }
        }
      }
    }
  }
});

// 在应用根组件中包裹ThemeProvider
<ThemeProvider theme={theme}>
  {/* 你的导航栏及其他组件 */}
</ThemeProvider>

方法三：自定义Label元素的hover样式 #

Tab的label默认由Typography组件渲染，也可以直接给label元素设置hover样式：

<Tab 
  label={
    <Typography sx={{ '&:hover': { color: 'white', textDecoration: 'none' } }}>
      {element}
    </Typography>
  } 
  id={index} 
  sx={{ display: { xs: 'none', md: 'inherit' } }} 
  href={`#${navElements[element]}`} 
/>

关键说明 #

之前设置textDecoration: 'none'无效是因为该属性仅控制文字下划线，而hover时的文字颜色需要通过color属性单独设置，且必须针对:hover伪类生效。

内容的提问来源于stack exchange，提问作者Kaustubh Paturi