こんにちは。
今回は、next.js のLinkタグを使用したときに出る下線が
text-decoration: none;
を使用してもなかなか消えないなかったので、
備忘録として解決策を残しておきます。
問題点
next.jsでLinkタグを使用したが、
紫色の下線部が現れた。
消したいと思い、Linkタグの中にあるdivタグに対して
text-decoration: none;
をしたがなかなか消えなかった。
解決策
Linkタグに対して、
text-decoration: none;を行う。
以上のように下線を消すことが出来た。
考察
どうやら調べてみると、
next/link の Link コンポーネントは、内部的には a タグを生成しません。
しかし、Link コンポーネントに className プロパティを渡すと、
そのクラス名は内部の a タグに適用されます。
らしいです。
例えば、
<Link href={`/home/${title}`} className={styles.link}>
と書くと、生成されるHTMLは
<a href="/home/some-title" class="link">...</a>
になります。
加えて、
text-decoration: none;は
テキストに関連する要素（特に a タグなどのインライン要素）
に対して直接効果を発揮するCSSプロパティなので、
LInkタグに適用する必要があると考えられます。
コメント