Material-UI Typography带有路由链接始终具有下划线

Question

当我在Typography元素中添加React-Router链接时，即使选择了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>

在浏览器中：

- Victor Lazaro

Answer 1

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

textDecoration: "none",
boxShadow: "none"

- A Webb

---

<Typography sx={{ textDecoration: "none" }}> - agustin

Answer 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>

- sueno

Answer 3

使用textDecoration: 'none'

import Typography from '@mui/material/Typography';
import { Link } from "react-router-dom";

<Typography
    className={classes.title}
    variant="h6"
    noWrap
    component={Link}
    to="/"
    sx={{ textDecoration: 'none' }}
    >
    Dashboard
</Typography>

- Ujith Nimantha