带有路由器链接的 Material-ui 排版始终带下划线答案

【问题标题】：Material-ui Typography with router link always underlined带有路由器链接的 Material-ui 排版始终带下划线
【发布时间】：2021-06-07 19:14:26
【问题描述】：

当我将 React-Router 链接添加到 Typography 元素时，我似乎无法摆脱下划线，即使选择了 underline="none" 或 "hover"。

来自 useStyles：

title: {
    display: "none",
    [theme.breakpoints.up("sm")]: {
      display: "block",
    },
  },

来自渲染（Typography 元素在工具栏中，不确定这是否会有所不同）：

          <Typography
            className={classes.title}
            variant="h6"
            noWrap
            component={Link}
            to="/"
            color="textPrimary"
            underline="none"
          >
            Your Text Here
          </Typography>

在浏览器中：

【问题讨论】：

标签： reactjs react-router material-ui

【解决方案1】：

您需要在您的链接 CSS 中指定以下内容：

textDecoration: "none",
boxShadow: "none"

【讨论】：

【解决方案2】：

https://material-ui.com/api/typography/ 似乎<Typograpphy/> 没有属性下划线，但<Link> 有https://material-ui.com/components/links/#links。你的文字应该是一个链接吗？也许你可以尝试这样的事情：

<Typography
  className={classes.title}
  variant="h6"
  noWrap
  component={Link}
  to="/"
  color="textPrimary"
>
  <Link href="#" underline="none">
    Your Text Here
  </Link>
</Typography>

【讨论】：