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 |
正确用法
typescript
// 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
typescript
// ✅ 正确
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