Material-UI中Link组件text-decoration样式不生效，求解决方案？

问题出在Next.js的<Link>组件会将内部的<ListItemButton>渲染为带有默认链接样式的<a>标签，你给<ListItemText>设置的textDecoration: 'none'会被<a>标签的默认样式覆盖——因为<a>标签的样式优先级更高。

你需要把样式直接应用到<ListItemButton>上，而不是<ListItemText>：

<Link href="/products">
  <ListItem disablePadding>
    <ListItemButton sx={{ textDecoration: 'none' }}>
      <ListItemIcon>
        <HomeIcon />
      </ListItemIcon>
      <ListItemText primary="Home"/>
    </ListItemButton>
  </ListItem>
</Link>

这样就能覆盖Link带来的默认下划线样式，因为<ListItemButton>是被Link包装的核心交互元素，它的样式会直接作用在生成的<a>标签上。

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