Chroma Panel

搜索文档

查找页面或章节

EN

常见错误

查看 Markdown

五个常见的配置问题,以及各自的直接解决办法。

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

把 onChange 存进全局状态

拖动时它每秒大约触发 60 次。把这个状态放在组件本地,或者改为在 onChangeComplete 中保存,详见 onChange 与 onChangeComplete

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

它只是让面板不再写入 <style> 标签。无论如何,CSS 都会由模块导入,所以构建产物的大小不变。它适用于 CSP 或关键 CSS 的场景,详见自行加载 CSS。想减小打包体积,应该从入口中少导入一些模式。

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

它会连带改掉面板里色块和标签页的样式。面板看起来「差不多对,但又不太对」,最常见的原因就是这个,详见面板显示不正常时

以为取色器在哪里都能用

只有浏览器提供 EyeDropper API 时,取色器才会渲染,详见浏览器支持。如果你自己实现触发按钮,先检查 useEyedropper().supported,用法见 useEyedropper

需要精度时却读取 hex

hex 的每个通道都被舍入到 8 位。如果颜色需要来回传递而保持不变,请存储 hsva,再把它传回 value。原因见关于

React 颜色选择器常见错误 | Chroma Panel