---

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

ReactUMG 颜色类型速查

两种颜色类型

属性 → 类型映射

正确用法

Copy// 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

Copy// ✅ 正确
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