Next.js Discord

Discord Forum

Remove underline from all text in children of Link component

Answered
Zack posted this in #help-forum
Open in Discord
ZackOP
In the Header of my application I have a Link component that wraps an MUI Stack Component containing two Next.js Images and an <h1> with some text. In both the CSS class assigned to the Link itself (utilStyles.linkFixer) and the CSS class assigned to the <h1> (headerStyles.headerTitle) I have text-decoration: none, however my text still gets underlined when I hover over it. How can I prevent this from happening? Attached is a photo of the code described.

Thank you!
Answered by Asian paper wasp
Without changing your HTML structure, you need to also handle the :hover case. If utilStyles is from a CSS module, you should add

.linkFixer:hover {
  text-decoration: none;
}


BTW, MUI has component prop for every component. You could just do <Stack component={Link} href="/" /> and use the sx prop for styling.
View full answer

2 Replies

Asian paper wasp
Without changing your HTML structure, you need to also handle the :hover case. If utilStyles is from a CSS module, you should add

.linkFixer:hover {
  text-decoration: none;
}


BTW, MUI has component prop for every component. You could just do <Stack component={Link} href="/" /> and use the sx prop for styling.
Answer
ZackOP
ah great! thank you!