# 常见错误

> 使用这个 React 颜色选择器时最常见的五个错误，从把 onChange 存进全局状态到 CSS 意外改了面板样式，以及正确做法。

Source: https://chroma-panel.jscrate.dev/zh/react/handbook/common-mistakes
Last updated: 2026-09-21

如果选择器用起来卡顿、显示不对，或者在不同浏览器里表现不一致，先对照检查下面这五项。

## 把 onChange 存进全局状态

拖动时它每秒大约触发 60 次。把这个状态放在组件本地，或者改为在 `onChangeComplete` 中保存，详见 [onChange 与 onChangeComplete](https://chroma-panel.jscrate.dev/zh/react/handbook/controlled#onchange-vs-onchangecomplete)。

## 以为 `injectStyles={false}` 能减小打包体积

它只是让面板不再写入 `<style>` 标签。无论如何，CSS 都会由模块导入，所以构建产物的大小不变。它适用于 CSP 或关键 CSS 的场景，详见[自行加载 CSS](https://chroma-panel.jscrate.dev/zh/react/handbook/theming#loading-the-css-yourself)。想减小打包体积，应该从[入口](https://chroma-panel.jscrate.dev/zh/react/utils/entry-points)中少导入一些模式。

## 自己的 CSS 里有未分层的 button 规则

它会连带改掉面板里色块和标签页的样式。面板看起来「差不多对，但又不太对」，最常见的原因就是这个，详见[面板显示不正常时](https://chroma-panel.jscrate.dev/zh/react/handbook/theming#if-the-panel-looks-wrong)。

## 以为取色器在哪里都能用

只有浏览器提供 `EyeDropper` API 时，取色器才会渲染，详见[浏览器支持](https://chroma-panel.jscrate.dev/zh/react/handbook/browser-support)。如果你自己实现触发按钮，先检查 `useEyedropper().supported`，用法见 [useEyedropper](https://chroma-panel.jscrate.dev/zh/react/utils/use-eyedropper)。

## 需要精度时却读取 hex

`hex` 的每个通道都被舍入到 8 位。如果颜色需要来回传递而保持不变，请存储 `hsva`，再把它传回 `value`。原因见[关于](https://chroma-panel.jscrate.dev/zh/react/overview/about#why-the-color-survives-a-round-trip)。