我正在使用 Next.js 和 Tailwind，为了让一些元素正确显示，我需要将一些样式类放入<html>and<body>中。
我对我的MyApp
function MyApp({ Component, pageProps}: AppProps) {
useEffect(() => {
document.querySelector("html").classList.add("h-full");
document.querySelector("body").classList.add("h-full");
document.querySelector("#__next").classList.add("h-full");
});
return (
<Component {...pageProps} />
)
}
那行得通...但我想知道是否有其他方法或更优雅的解决方案。
我们同时使用了这两个_document.tsx文件并用这个做了一个文件：
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en-us" className="h-full">
<Head />
<body className="h-full">
<Main />
<NextScript />
</body>
</Html>
)
}
我们在一些 Tailwind CSS/Next.js 研究中发现了这一点，它对我们有用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句