使用Next.js Link时MUI ListItem显示蓝色样式，如何修复？

你遇到的问题是因为Next.js的Link组件会渲染原生<a>标签，它自带的下划线、蓝色样式优先级高于ListItemText的设置，所以直接在ListItemText上设color: 'inherit'不生效。下面是几种可行的解决方式：

方法1：直接给Next.js Link添加样式 #

通过sx属性直接覆盖Link渲染的<a>标签样式，这是最直接的方式：

<ListItem disablePadding>
  <Link 
    href="/some-path" 
    passHref 
    sx={{ 
      textDecoration: 'none', 
      color: 'inherit',
      '&:hover': { textDecoration: 'none' } // 可选：hover时也不显示下划线
    }}
  >
    <ListItemButton>
      <ListItemText primary="Some link text" />
    </ListItemButton>
  </Link>
</ListItem>

方法2：通过MUI主题全局配置 #

如果需要在整个应用中统一这种无样式的链接，可以自定义MUI主题，覆盖全局链接样式：

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

const customTheme = createTheme({
  typography: {
    link: {
      textDecoration: 'none',
      color: 'inherit',
      '&:hover': {
        textDecoration: 'none'
      }
    }
  }
});

// 在根组件中使用ThemeProvider包裹应用
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

方法3：通过ListItemButton的后代选择器设置样式 #

利用ListItemButton的sx属性，选中内部的<a>标签进行样式覆盖：

<ListItem disablePadding>
  <Link href="/some-path" passHref>
    <ListItemButton sx={{ '& a': { textDecoration: 'none', color: 'inherit' } }}>
      <ListItemText primary="Some link text" />
    </ListItemButton>
  </Link>
</ListItem>

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