HarmonyOS鸿蒙Next中使用TextInput的borderColor失效
HarmonyOS鸿蒙Next中使用TextInput的borderColor失效 在使用TextInput的时候设置了borderColor选项，但是当点击输入框进行文本编辑的时候，输入框的变成一个没有设置边框颜色的默认状态。
从你的描述看，遇到了组件TextInput一个常见问题，是TextInput焦点状态(focused)时，系统会应用默认样式来覆盖手动设置的borderColor。代码中设置的borderColor是作用于默认状态(normal)看起来像是"失效"啦。
可尝试一下用 @Styles 定义一下不同状态的borderColor
//默认态
[@Styles](/user/Styles)
normalStyle() {
.borderColor(Color.Gray)
.borderWidth(1)
}
//获取焦点态
[@Styles](/user/Styles)
focusedStyle() {
.borderColor(Color.Red) //获取到焦点时颜色
.borderWidth(1)
}
TextInput({ placeholder: '请输入内容' })
.stateStyles({
normal: this.normalStyle, //normal
focused: this.focusedStyle //focused
})
更多关于HarmonyOS鸿蒙Next中使用TextInput的borderColor失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
这不是单纯 borderColor 失效，而是 TextInput 获焦后进入系统焦点态，默认交互描边可能覆盖普通态边框。
处理方式：
- 同时设置 borderWidth/borderColor，确认普通态能显示。
- 用 stateStyles 配 focused 状态，给焦点态也设置同样的 border。
- 如果 stateStyles 对 TextInput 私有样式覆盖不完整，可以用 onFocus/onBlur 维护一个 @State isFocused，然后按状态动态设置 border。
- 检查外层是否还有 background、padding、clip 导致边框被遮住。
也就是说，普通态和 focused 态要分别处理，不能只设置一次 borderColor。
TextInput 的 borderColor 看起来“失效”，多数不是颜色属性完全没用，而是被状态样式、边框宽度或组件默认交互态盖住了。它像一支笔已经换了墨水，但纸上还有一层系统默认描边，最后看到的不是你想要的颜色。
建议先确认三点：第一，是否同时设置了 borderWidth 或 border，只有颜色没有宽度时视觉上可能不明显；第二，TextInput 聚焦、禁用、错误态、hover 态会触发系统样式，建议用 @State 维护当前边框颜色，在 onFocus/onBlur/onChange 校验结果里统一切换；第三，属性顺序尽量把 border/borderColor 放在背景、padding、状态样式之后，避免被后续样式覆盖。
如果要做输入框校验，推荐写成 normal/focus/error 三套状态：默认灰色，聚焦蓝色，校验失败红色。这样比单独写死 borderColor 更稳定，也方便多端适配。参考来源：ArkUI TextInput 组件文档、通用属性 border/stateStyles 说明。
这个现象在 HarmonyOS NEXT 的 ArkUI 里其实比较常见，不是 borderColor 真失效，而是：
TextInput 获取焦点后，会进入系统 Focus 态，系统会绘制自己的激活边框（Focus Border），覆盖你设置的 borderColor。
所以你看到的是：
TextInput()
.border({
width: 1,
color: Color.Red
})
未聚焦：
红色边框
点击后：
系统默认蓝色/灰色焦点边框
把你的边框覆盖了。
原因
ArkUI 的 TextInput 属于系统输入组件。
获得焦点时会自动应用：
Focus Style
Focus Ring
Focus Border
用于无障碍和统一设计规范。
所以：
.borderColor()
只影响普通状态。
不影响：
Focused
Activated
状态。
方案1：自己控制 Focus 状态
最常用。
@State isFocus: boolean = false
TextInput()
.border({
width: 1,
color: this.isFocus ? '#FF0000' : '#CCCCCC'
})
.onFocus(() => {
this.isFocus = true
})
.onBlur(() => {
this.isFocus = false
})
这样焦点时重新设置边框。
方案2：关闭系统下划线
如果你使用的是：
TextInput()
系统可能同时绘制：
Underline
Focus Line
可以尝试：
.showUnderline(false)
例如：
TextInput()
.showUnderline(false)
.border({
width: 1,
color: Color.Red
})
这样很多情况下系统焦点样式会减弱。
方案3：外层套一层容器
这是实际项目最稳定的方案。
不要给 TextInput 设置边框。
而是：
Row() {
TextInput()
.borderWidth(0)
}
.border({
width: 1,
color: this.isFocus ? '#FF0000' : '#CCCCCC'
})
.borderRadius(12)
.onClick(() => {
})
然后：
.onFocus(() => {
this.isFocus = true
})
.onBlur(() => {
this.isFocus = false
})
控制外层容器边框。
这样不会被系统 Focus Border 干扰。
方案4：如果是 React Native OHOS
如果你说的是：
<TextInput />
而不是 ArkUI：
那是另一种情况。
RN 的 TextInput 获取焦点后会使用：
focus style
outline
覆盖：
borderColor
需要：
const [focus, setFocus] = useState(false)
<TextInput
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
style={{
borderWidth: 1,
borderColor: focus ? '#1677FF' : '#CCCCCC'
}}
/>
或者处理：
outlineColor
outlineStyle
相关样式。
因为没有给border设置边框宽度,要一起配置才能生效
TextInput({text: "", placeholder: "请输入数据"})
.borderWidth(1)
.borderColor("#00FFFF")
同时设置borderWidth。
TextInput()
.width(200)
.height(100)
.borderWidth(3)
.borderColor(Color.Red)
在鸿蒙Next（API 12+）中，TextInput 的 borderColor 属性已废弃且失效。应使用 .border() 方法并传入 BorderOptions 对象，或通过 shape 属性自定义背景与边框。例如：TextInput().border({ width: 1, color: Color.Red })。
