我正在使用Next.js和Tailwind，为了让一些元素正确显示，我需要在<html>和<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的一些研究中发现了这一点，它对我们有效。
我正在使用下一个js，功能组件，这对我来说很有效
useEffect(() => {
if (modalOpen) {
document.querySelector("html")?.classList.add("!overflow-y-hidden");
} else {
document.querySelector("html")?.classList.remove("!overflow-y-hidden");
}
}，[modalOpen](；