# Vite

> 在 Vite 应用中配置 React 颜色选择器：安装、在 main.tsx 中导入样式表，并只加载应用实际用到的选择器模式。

Source: https://chroma-panel.jscrate.dev/zh/react/frameworks/vite
Last updated: 2026-09-21

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

## 安装

```bash
npm install chroma-panel
```

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

## 导入样式表

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

```tsx
// 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 的方式见[主题](https://chroma-panel.jscrate.dev/zh/react/handbook/theming#loading-the-css-yourself)。

## 在 App.tsx 中使用选择器

```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` 中，详见[受控与非受控](https://chroma-panel.jscrate.dev/zh/react/handbook/controlled#onchange-vs-onchangecomplete)。

## 如果你使用 Tailwind

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

```css
/* 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 样式](https://chroma-panel.jscrate.dev/zh/react/handbook/tailwind)。

## 只加载需要的模式

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

```tsx
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`，都列在[入口](https://chroma-panel.jscrate.dev/zh/react/utils/entry-points)中。