如何从@tanstack/react-router Link组件中删除CSS？

Question

我正在使用 React MUI List 组件 和 tanstack router Link 组件

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

代码按预期工作，但 Link 组件覆盖了 MUI ListItemText 组件的 CSS。

如果没有 Link 组件，假数据会像这样渲染

使用链接组件，假数据会像这样呈现

将

style={{ textDecoration: "none", textDecorationColor: "currentColor" }}

添加到链接组件并没有修复它。

我创建了一个用于繁殖的小游乐场。你知道如何解决这个问题吗？

Answer 1

你似乎在错误的地方提供了CSS，只需将CSS提供给标签而不是

style={{ textDecoration: 'none', color: 'inherit' }}

像这样重构你的代码

<List>
  <Link
    to="/"
    style={{ textDecoration: 'none', color: 'inherit' }} // Inline style for Link
  >
    <ListItemButton>
      <ListItemText primary="Text" />
      <ListItemText primary="Text" />
    </ListItemButton>
  </Link>
</List>