如何消除@tanstack/react-router Link组件对MUI样式的覆盖？

方案一：用ListItemButton的component属性替换为Link #

MUI的列表项组件支持通过component属性指定根渲染元素，直接将ListItemButton的根组件设为TanStack Router的Link，既能完整保留MUI样式，又实现路由跳转功能：

import { List, ListItemButton, ListItemText } from '@mui/material';
import { Link } from '@tanstack/react-router';

<List>
  <ListItemButton 
    component={Link} 
    to="/customers/$customerID" 
    params={{ customerID: 123 }}
  >
    <ListItemText primary="Customer 123" />
  </ListItemButton>
</List>

方案二：给Link设置display: contents消除布局干扰 #

如果需要保留Link包裹的结构，给Link添加display: contents样式，让Link本身不参与布局计算，子元素直接继承父容器的布局上下文，同时移除文本装饰并继承颜色：

import { List, ListItemButton, ListItemText } from '@mui/material';
import { Link } from '@tanstack/react-router';

<List>
  <Link 
    to="/customers/$customerID" 
    params={{ customerID: 123 }}
    style={{ 
      display: 'contents', 
      textDecoration: 'none',
      color: 'inherit'
    }}
  >
    <ListItemButton>
      <ListItemText primary="Customer 123" />
    </ListItemButton>
  </Link>
</List>

说明 #

之前添加的textDecoration样式无效，是因为问题核心不是文本下划线，而是Link作为包裹元素（默认a标签为行内元素）破坏了MUI列表项的块级布局上下文。上述两种方案都能从根源解决样式被覆盖的问题，推荐优先使用方案一，更符合MUI组件设计规范。

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