我有一個安裝了 tailwindcss 的 nextjs 前端專案。
在下面的示例代碼中
import Link from 'next/link'
return(
<div>
<Link className="text-sm hover:text-gray-600" href="#">Test Link styling</Link>
<a className="text-sm hover:text-gray-600" href="#">Test Link styling</a>
</div>
)
在檢查頁面上的元素時，錨標記由 tailwindcss 設定樣式，但來自 Link 標記的錨標記沒有任何樣式。
有誰知道如何解決這一問題？它是否需要更改 tailwindcss 配置？
uj5u.com熱心網友回復：
只需將 a 標簽放在 Link 標簽內而不帶 href，將 href 留在 Link 中并將樣式應用到 a 標簽。喜歡 ：
<Link className="text-sm hover:text-gray-600" href="#">
<a className="text-sm hover:text-gray-600">Test Link styling</a>
</Link>
來源：https : //nextjs.org/docs/api-reference/next/link
希望這會有所幫助，如果您有機會，請為另一個按鈕點擊事件點贊OnClick 觸發
uj5u.com熱心網友回復：
是的，這是因為 Next.jsLink不接受 className 屬性。
如果您檢查代碼的結果 HTML，您將看到結果<a>標簽上沒有您的任何類。
為了使其正常作業，您需要將錨標記作為子項添加到您的鏈接：
<Link href="#">Test Link styling</Link>
<a className="text-sm hover:text-gray-600">Test Link styling</a>
</Link>
現在 next 不會<a>為您的鏈接創建標簽，而是將href屬性傳遞給您現有的<a>標簽。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353043.html
上一篇：CSS-position:absolute是堆疊影像
下一篇：div中的角度動態背景影像