Why the Link doesn't working with style i saw the stack and pass the className as props but still it doesnt seems to working for the text-decoration

How to style a react Link component?

ul{ list-style-type: none; margin: 0; padding: 0; display: flex; padding-left: 10px; padding-right: 10px; } ul li{ padding: 10px; font-size: 26px; cursor: pointer; } ul li:hover{ font-size: 20px; transition: 0.4ms; transition: 0.5ms; } .link:active{ text-decoration: none; } .link:active{ text-decoration: underline; } return( <nav> <ul> <li><Link to="/" className={"link"}>Home</Link></li> <li><Link to="" className={"link"}>Collection</Link></li> <li>Timeline</li> <li><Link to="/about" className={"link"}>About</Link></li> <li className="btn" onClick={toggleTheme}>{theme === "dark" ? "Dark": "Light"}</li> </ul> </nav> );

knight_man's user avatar

2

Could you include what exactly makes up the Link component?

But the solution to this might be to actually have className as a Link component prop and then u pass that into the actual html element being returned. An example is below;

function Link({className, children, to}) { return <a className={className} href={to}>{children}</a> }

Also just keep this

.link:active{ text-decoration: underline; }

without the

text-decoration: none;

or you can do

.link { text-decoration: none; }

PS:// Please correct me for any mistakes or reply if this helps

slacker498's user avatar

New contributor

slacker498 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.