handling-colors

15195999826's avatarfrom 15195999826

ReactUMG 颜色/色彩类型速查。在设置背景色、前景色、透明度、ColorAndOpacity、BrushColor、ForegroundColor 等颜色属性时激活。帮助区分 SlateColor（嵌套结构）和 LinearColor（直接结构）的正确用法，以及 ColorUseRule 的必要性。

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 9, 2026⬇️3downloads
[API Helpers]

When & Why to Use This Skill

This Claude skill serves as a specialized technical reference for ReactUMG developers to master color type implementations within Unreal Engine's UI framework. It provides precise mapping between UI components and their required color structures—distinguishing between nested SlateColor and direct LinearColor—while ensuring critical rules like ColorUseRule are followed to prevent rendering failures.

Use Cases

  • Quickly determining whether a specific ReactUMG property (e.g., BrushColor vs. ColorAndOpacity) requires a SlateColor or LinearColor structure.
  • Debugging TypeScript type errors such as 'Property R does not exist' by identifying incorrect nesting in color object definitions.
  • Ensuring UI colors render correctly in WidgetStyles by applying the mandatory ColorUseRule: 0 requirement.
  • Streamlining the development of complex Unreal Engine UMG interfaces by providing a cheat sheet for property-to-type mappings.
namehandling-colors
descriptionReactUMG 颜色/色彩类型速查。在设置背景色、前景色、透明度、ColorAndOpacity、BrushColor、ForegroundColor 等颜色属性时激活。帮助区分 SlateColor（嵌套结构）和 LinearColor（直接结构）的正确用法，以及 ColorUseRule 的必要性。

ReactUMG 颜色类型速查

两种颜色类型

类型 结构 示例
SlateColor {SpecifiedColor: {R, G, B, A}} 嵌套结构
LinearColor {R, G, B, A} 直接结构

属性 → 类型映射

组件 属性 类型
TextBlock ColorAndOpacity SlateColor
TextBlock ShadowColorAndOpacity LinearColor
Border BrushColor LinearColor
Border ContentColorAndOpacity LinearColor
Image ColorAndOpacity LinearColor
Button ForegroundColor (in style) SlateColor
WidgetStyle ForegroundColor SlateColor
WidgetStyle FocusedForegroundColor SlateColor

正确用法

// SlateColor（嵌套）
<TextBlock
    ColorAndOpacity={{
        SpecifiedColor: {R: 0.9, G: 0.95, B: 1, A: 1}
    }}
/>

// LinearColor（直接）
<Border
    BrushColor={{R: 0.05, G: 0.08, B: 0.1, A: 0.95}}
/>

⚠️ 关键规则：ColorUseRule

WidgetStyle 中的颜色必须加 ColorUseRule: 0

// ✅ 正确
WidgetStyle={{
    ForegroundColor: {
        SpecifiedColor: {R: 0.5, G: 0.5, B: 0.5, A: 1},
        ColorUseRule: 0  // 必须！
    }
}}

// ❌ 错误（颜色不会生效）
WidgetStyle={{
    ForegroundColor: {
        SpecifiedColor: {R: 0.5, G: 0.5, B: 0.5, A: 1}
        // 缺少 ColorUseRule: 0
    }
}}

快速判断方法

查看 IDE 错误信息：

  • "R does not exist in type RecursivePartial<SlateColor>" → 用 SlateColor
  • "SpecifiedColor does not exist in type RecursivePartial<LinearColor>" → 用 LinearColor