在 Vite 中配置颜色选择器

安装这个包，在 main.tsx 中导入它的样式表，再在 App.tsx 中渲染选择器。不需要 Vite 插件，也不需要自定义解析器。

安装

npm install chroma-panel

react 和 react-dom 是 peer 依赖，这个包本身没有任何依赖，所以不会额外引入其他东西。

导入样式表

面板在 effect 中注入自己的样式表。在客户端渲染的 Vite 应用中，这一步在你看到任何内容之前就已完成，所以导入是可选的。如果你希望 CSS 出现在构建产物中，而不是写在 <style> 标签里，比如在严格的内容安全策略（Content Security Policy）下，就自己导入它。

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
 
import "chroma-panel/style.css";
import "./index.css";
 
import App from "./App";
 
const root = document.getElementById("root");
 
if (root !== null) {
  createRoot(root).render(
    <StrictMode>
      <App />
    </StrictMode>
  );
}

自己导入之后，请传入 injectStyles={false}，免得面板再写一个标签。这并不会让你的包变小，无论哪种方式，CSS 都在模块里。其他加载 CSS 的方式见主题。

在 App.tsx 中使用选择器

// src/App.tsx
import { useState } from "react";
import { ColorInput, type ColorChangeResult } from "chroma-panel";
 
export default function App() {
  const [color, setColor] = useState<string>("#3366cc");
 
  const handleChange = (result: ColorChangeResult): void => {
    setColor(result.hex);
  };
 
  return (
    <main>
      <ColorInput value={color} onChange={handleChange} injectStyles={false} />
      <p style={{ color }}>{color}</p>
    </main>
  );
}

拖动时 onChange 会持续触发。保存数据、发起网络请求这类有开销的操作，请放在 onChangeComplete 中，详见受控与非受控。

如果你使用 Tailwind

这个包把样式规则放在 @layer chroma-panel 中。未声明的层会排在 Tailwind 的层之后，这样面板的规则就会压过你的工具类。请在 CSS 文件中导入样式表并声明顺序，而不是在 main.tsx 中导入：

/* src/index.css */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "chroma-panel/style.css";
@import "tailwindcss/utilities.css" layer(utilities);

为什么只有这个顺序可行，以及面板的各个部分分别接受哪些类名，见使用 Tailwind 样式。

只加载需要的模式

导入 chroma-panel 会注册全部五种模式：色轮、滑块、调色板、图片和预设色。如果想减小体积，可以从 chroma-panel/panel 导入外壳，再自己添加模式。

import { ChromaPanel } from "chroma-panel/panel";
import { wheelMode } from "chroma-panel/modes";
 
<ChromaPanel modes={[wheelMode]} />;

导入内容	应用增加的体积
全部五种模式	23.1 kB
外壳加一种模式	15.0 kB

两个数字都是 gzip 压缩后的大小，不含 React，测量的是 Vite 生产构建中增加的体积。

显式传入的模式支持 tree-shaking

从 chroma-panel/modes 传入模式对象。旧的副作用导入写法 import "chroma-panel/wheel" 仍然受支持，方便现有应用继续使用。

所有子路径，包括不依赖 React 的颜色引擎 chroma-panel/core，都列在入口中。