Material-UI Typography搭配React Router链接时配置属性仍持续显示下划线

问题根因 #

Typography 组件的underline配置仅对 Material-UI 内置 Link 组件生效。当你将 Typography 的component属性指定为 React Router 的 Link 组件时，组件最终渲染为原生<a>标签，设置的underline="none"会直接透传给 React Router 的 Link 组件，但该组件并不识别这个MUI专属配置，不会注入文本装饰相关的样式；最终显示的下划线直接来自浏览器对原生a标签的默认渲染规则，自然无法通过underline配置清除。

注：你提到的 Toolbar 组件上下文不会对该问题产生影响。

对应解决方法 #

1. 直接在自定义样式中覆盖下划线规则 #

现有代码结构不需要大改，只需要在已有的title样式类中补充文本装饰相关规则即可，修改useStyles的定义：

title: {
  display: "none",
  // 新增：常态下移除下划线
  textDecoration: "none",
  // 新增：hover状态下按需控制下划线展示
  "&:hover": {
    textDecoration: "none"
  },
  [theme.breakpoints.up("sm")]: {
    display: "block",
  },
},

2. 调整组件结构，用MUI Link承载路由跳转 #

如果想直接使用MUI内置的underline配置能力，可以调整组件嵌套逻辑，让MUI Link负责渲染路由跳转、Typography只负责文本展示：

// 按需引入MUI Link组件
import { Link as MuiLink } from '@material-ui/core'

// 替换原有的Typography写法
<MuiLink
  component={Link} // 此处Link仍为React Router的路由跳转组件
  to="/"
  underline="none" // 此时underline配置即可正常生效
  color="inherit"
>
  <Typography
    className={classes.title}
    variant="h6"
    noWrap
    color="textPrimary"
  >
    Your Text Here
  </Typography>
</MuiLink>

3. 全局统一移除路由链接下划线 #

如果项目内大量场景都需要消除a标签的默认下划线，可以在全局样式中统一配置，避免重复编写类样式：

a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

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