Material-ui Typography with router link always underlined

Question

I can't seem to get rid of the underline when I add a React-Router link to a Typography element, even if underline="none" or "hover" is selected.

from useStyles:

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

from render (the Typography element is in a Toolbar, not sure if that makes a difference):

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

in browser:

Answer 1

You need to specify the following in your Links CSS:

textDecoration: "none",
boxShadow: "none"

Answer 2

https://material-ui.com/api/typography/ it's seems like <Typograpphy/> don't have attribute underline, but <Link> has https://material-ui.com/components/links/#links. should your text be a link? Maybe you could try something like this:

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