节点颜色失效主因是高级扩展类型硬编码样式覆盖nodeStyle，需检查源码是否透传style；优先级为实例级>类型级>全局默认；渐变阴影等需SVG原生实现；动态变色应缓存对象或直操作DOM。
节点颜色没生效？检查 nodeStyle 是否被高级扩展类型覆盖
自定义节点颜色最常失效的原因，不是写法错，而是高级扩展类型（比如 customnode、reactnode、vuenode）内部硬编码了样式，把外部传入的 nodestyle 或 style 直接忽略了。
实操建议：
- 打开你用的扩展节点源码（或文档），搜索
style、className、fill等关键词，确认它是否透传了父级样式 - 如果它只接受一个
component属性且不暴露样式接口，那nodeStyle基本无效，得改用组件内联样式 - 某些库（如
react-flowv22+）中，data里传color字段会被默认节点渲染器读取，但自定义组件不会自动读——得手动从data.color取值并应用
nodeStyle 和 nodeTypes 里的 style 冲突怎么判优先级？
多数图编辑器（如 react-flow、diagrams.net SDK）里，节点最终样式是“实例级 > 类型级 > 全局默认”的三层覆盖。但具体顺序得看实现，不能默认。
实操建议：
- 在节点定义时显式写全
nodeStyle，哪怕只是{ fill: '#3b82f6' }，避免依赖隐式继承 - 如果用了
nodeTypes配置，检查该类型定义里是否已有style字段——有就删掉，或确保它和你实例传的不冲突 - 用浏览器开发者工具检查实际渲染出的 SVG 元素，看
fill、stroke是来自哪个 CSS rule 或内联 style，比猜更准
支持渐变色、阴影、CSS 变量？别直接塞进 nodeStyle
nodeStyle 通常只接受基础 CSS 属性（fill、stroke、opacity），遇到 background: linear-gradient(...) 或 box-shadow 会静默失败，控制台也不报错。
实操建议：
- 渐变色必须用
<defs>+<linearGradient>+ 引用url(#id)，不能靠nodeStyle.fill字符串实现 - 阴影、圆角、滤镜等需要 SVG 原生支持的特性，得在自定义节点组件里用
<g filter="url(#shadow)">手动加，nodeStyle不管用 - CSS 变量（如
fill: var(--primary)）在 SVG 内联 style 中基本不生效，得靠外部 CSS class +!important或 JS 注入
动态更新颜色卡顿？避开重绘陷阱
频繁修改节点颜色（比如根据状态实时变色）容易触发整图重排，尤其节点数超 50 后明显卡顿。根本原因不是颜色本身，而是每次更新都导致 React/Vue 组件重渲染或 SVG 元素属性批量重设。
实操建议：
- 用
useMemo缓存nodeStyle对象，避免每次 render 都新建对象引发不必要的 diff - 如果只是改
fill，优先用ref.current.style.fill = '#xxx'直接操作 DOM，跳过框架层（前提是没绑定其他响应逻辑） - 大量节点需统一变色时，别逐个改
nodeStyle，改 CSS class 或全局 CSS 变量更高效
颜色样式看着简单，但一旦混进自定义节点、SVG 原生能力、动态更新三个要素，链路就断在你看不见的地方。调试时先盯死真实渲染出的元素，再倒推哪一层截了你的样式。
