How to add symbol to end of <Link> component from Material UI?-CodePudding

How do I add a symbol (e.g. >) to the end of a component from Material UI? i.e. It looks like this:

Currently, my code looks something like this:

<Link>
   Learn more &gt;
</Link>

But I want it to end up looking like this without adding ">" into the HTML:

<Link xxx>
   Learn more
</Link>

CodePudding user response：

So you can do it like this

return (
    <Link>
        Learn More {">"}
    </Link>
);

If you want it to not be underlined, I would put it in its own tag and make the css to that tag be disabled

return (
     <Link>
         Learn More <p className="myParagraph">{">"}</p>
     <Link>
);

css file:

myParagraph {
     text-decoration: none;
}

CodePudding user response：

Could this work?

const linkSymbol = ">";

return ( 
  <Link props> 
     Learn More {linkSymbol}
  </Link>
)