如果选择器用起来卡顿、显示不对,或者在不同浏览器里表现不一致,先对照检查下面这五项。
把 onChange 存进全局状态
拖动时它每秒大约触发 60 次。把这个状态放在组件本地,或者改为在 onChangeComplete 中保存,详见 onChange 与 onChangeComplete。
以为 injectStyles={false} 能减小打包体积
它只是让面板不再写入 <style> 标签。无论如何,CSS 都会由模块导入,所以构建产物的大小不变。它适用于 CSP 或关键 CSS 的场景,详见自行加载 CSS。想减小打包体积,应该从入口中少导入一些模式。
自己的 CSS 里有未分层的 button 规则
它会连带改掉面板里色块和标签页的样式。面板看起来「差不多对,但又不太对」,最常见的原因就是这个,详见面板显示不正常时。
以为取色器在哪里都能用
只有浏览器提供 EyeDropper API 时,取色器才会渲染,详见浏览器支持。如果你自己实现触发按钮,先检查 useEyedropper().supported,用法见 useEyedropper。
需要精度时却读取 hex
hex 的每个通道都被舍入到 8 位。如果颜色需要来回传递而保持不变,请存储 hsva,再把它传回 value。原因见关于。