我想在我的 Next.js 应用程序中添加滚动行为 smooth，Tailwind CSS 文档指示我们在 <html/> 中添加实用程序类.
<html class="scroll-smooth ">
<!-- ... -->
</html>
此文件不包含 html标签:
import Head from "next/head";
import "@material-tailwind/react/tailwind.css";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
如何以及在何处添加 smooth-scroll我的项目中的实用程序类？
最佳答案
使用自定义 _document.js 并将其添加到那里 - Here是对它的作用的解释 -
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html class="scroll-smooth">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
关于next.js - 如何将 Tailwind CSS 滚动平滑类添加到 Next.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71125642/