在 Next.js 和服务端渲染中使用 React 颜色选择器

这些组件可以在 Next.js、Remix 和其他服务端渲染环境中渲染。模块加载时，这个包不会读取 window；缺少 document 时，样式注入会直接跳过。

水合之前，HTML 中就已经包含当前选中的颜色。如果整个选择器在水合前也必须带上样式，请自己导入样式表。

避免无样式闪烁

面板在 effect 中注入样式表，所以服务端渲染出的标记在水合之前是没有样式的。自己导入样式表，并关闭自动注入：

// app/layout.tsx
import "chroma-panel/style.css";

<ChromaPanel injectStyles={false} />

这条导入语句相对于你自己的 CSS 应该放在什么位置，请看使用 Tailwind 样式。

导入 chroma-panel 时，会通过包的 sideEffects 字段中列出的副作用注册全部五种模式。如果你直接导入某个模式的入口，要以副作用的方式导入它，而不是导入某个绑定。所有子路径都列在入口中。

import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/wheel";