145 字
1 分钟
在 Next.js 中使用 Primer UI
安装 Primer
首先需要安装 Product UI 或者 Brand UI，详见 Primer 文档，本文以 Brand UI 为例
创建 ThemeProvider 组件
由于 Primer UI 的 ThemeProvider 是客户端组件，所以不能直接加入到 layout.tsx 中，得自己写一个
NOTE也可以直接使用 Primer 提供的
ThemeProvider组件，只要能提供data-color-mode属性即可
"use client";
import { useTheme } from "next-themes";import { ReactNode, useEffect } from "react";
export default function ThemeProvider({ children }: { children: ReactNode }) { const { theme } = useTheme();
useEffect(() => { document.body.dataset.colorMode = theme; }, [theme]);
return children;}使用 ThemeProvider
然后在 layout.tsx 中使用这个 Provider 就可以了
在 Next.js 中使用 Primer UI
https://2y.nz/p/nextjs-primer/